Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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
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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 14 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!