Plugin .highlight() dipakai untuk menandai setiap teks yang telah ditentukan. Penulisannya ibarat 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 sanggup menunjukkan tanda tertentu pada teks tersebut, contohnya mengubah warna latar menjadi berwarna kuning supaya teks yang terbungkus elemen span.yellow menjadi berlatar kuning:
.yellow { background-color:yellow; }Tapi cobalah untuk tidak membatasi diri. Kita sanggup memakai plugin tersebut untuk menandai setiap abjad yang cocok dengan kata kunci dalam halaman hasil pencarian, sehingga halaman hasil pencarian akan tampak lebih komunikatif dan jelas. Pada pada dasarnya kita akan mengambil kata kunci yang tercantum di dalam URL pada Address Bar, lalu ambil abjad tersebut sebagai abjad yang akan kita tandai:
Kita akan memakai JavaScript window.location.search untuk mengambil abjad tersebut. Tapi alasannya window.location.search akan mencetak abjad 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 abjad encoded URI menjadi abjad 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, kiprah 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 suplemen kecil, mungkin Anda juga ingin menampilkan pesan-pesan seperti, "Hasil pencarian untuk kata kunci ... " atau, "Tidak ditemukan!". Itu sanggup dibentuk dengan membuat peraturan menurut 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 abjad window.location.search ada/ditemukan (ditemukan sesudah 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 jikalau elemen span.yellow tidak ditemukan, ganti keterangan hasil penelusuran dengan pernyataan bahwa hasil penelusuran tidak ditemukan.
Terakhir yaitu membuat formilir pencarian:
<form action="/search.html"> <input name="query" type="text" value="" /> <input type="submit" value="Cari!" /> </form>