Memanfaatkan Plugin .highlight() untuk Menandai Kata Kunci Hasil Pencarian

Plugin .highlight() digunakan untuk menandai setiap teks yang telah ditentukan. Penulisannya seperti ini:

// $(selektor).highlight('teks', 'kelas');
$('p').highlight('lorem', 'yellow');

Kode di atas akan membungkus semua kata "lorem" di dalam paragraf dengan elemen <span class="yellow">, dengan begitu kita bisa memberikan tanda tertentu pada teks tersebut, misalnya mengubah warna latar menjadi berwarna kuning agar teks yang terbungkus elemen span.yellow menjadi berlatar kuning:

.yellow {
  background-color:yellow;
}

Tapi cobalah untuk tidak membatasi diri. Kita bisa menggunakan plugin tersebut untuk menandai setiap karakter yang cocok dengan kata kunci dalam halaman hasil pencarian, sehingga halaman hasil pencarian akan tampak lebih komunikatif dan jelas. Pada intinya kita akan mengambil kata kunci yang tercantum di dalam URL pada Address Bar, kemudian ambil karakter tersebut sebagai karakter yang akan kita tandai:

Mengambil Karakter pada URL Pencarian

Kita akan menggunakan JavaScript window.location.search untuk mengambil karakter tersebut. Tapi karena window.location.search akan mencetak karakter input beserta simbol ?query= pada URL, maka kita harus memodifikasinya sedikit. Dan juga, untuk simbol + yang menjadi pengganti simbol spasi, itu juga harus diganti:

// Contoh: http://www.namasitus.com/search?query=lorem+ipsum

var qs = window.location.search; // Akan menghasilkan nilai "?query=lorem+ipsum"
    // Ubah semua karakter encoded URI menjadi karakter normal,
    // hapus simbol "?query="
    // dan ubah simbol "+" menjadi spasi
    qs = decodeURIComponent(qs.replace(/\?query=/, "").replace(/\+/g, " ")); // Akan mengasilkan nilai "lorem ipsum" (tanpa tanda petik)

Setelah variabel qs berhasil ditentukan, tugas selanjutnya hanyalah menerapkan variabel ke dalam plugin:

jQuery.fn.highlight = function(str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function() {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};
var qs = window.location.search;
    qs = decodeURIComponent(qs.replace(/\?query=/, "").replace(/\+/g, " "));
$('*').highlight(qs, 'yellow');

Sebagai tambahan kecil, mungkin Anda juga ingin menampilkan pesan-pesan seperti, "Hasil pencarian untuk kata kunci ... " atau, "Tidak ditemukan!". Itu bisa dibuat dengan menciptakan peraturan berdasarkan kondisi:

if(window.location.search) {
    $('#message').html('<h2>Hasil penelusuran untuk kata kunci \"' + qs + '\"</h2>');
    if($('span.yellow').length == 0) {
        $('#message').html('<h2>Tidak ditemukan!</h2>');
    }
}

Jika karakter window.location.search ada/ditemukan (ditemukan setelah menekan tombol Submit atau tombol Enter pada papan kunci), sisipkan pesan hasil penelusuran pada elemen #message. Setelah itu maka plugin akan bekerja untuk menandai seluruh teks yang sesuai dengan nilai variabel qs yang kita dapatkan dari URL. Setelah plugin menjalankan tugasnya, maka elemen <span class="yellow"> akan menyebar ke seluruh teks yang telah ditemukan. Tapi jika elemen span.yellow tidak ditemukan, ganti keterangan hasil penelusuran dengan pernyataan bahwa hasil penelusuran tidak ditemukan.

Terakhir adalah membuat formilir pencarian:

<form action="/search.html">
    <input name="query" type="text" value="" />
    <input type="submit" value="Cari!" />
</form>

Lihat Demo