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

14 Komentar

  • Unknown

    hihihi aku gak membatasi diri, cuman gak ngerti aja sama JS jadi ya gak bisa ini itu :D padahal ya pengen banget nih aku bisa ngerti JS

  • Unknown

    @system of blog Fitur Replynya jadi makin keren Nih, ajarin cara bikinnya dok mas :)

  • Beben Koben

    Lama-lama kepengen bisa script, tapi otak nggak mau nyampe-nyampe...jadi males...hihihi \o/

    Sapa tuh yg mosting menu windows 7 pakek CSS...

  • Taufik Nurrohman

    @Syndicate OS WANI PIIROOOO... Khkhkhkh... (-.-,)

  • Taufik Nurrohman

    @Beben Koben Sudah tambah satu lagi: Es krimmmm... <3

  • Rizky Wardiansyah

    waduh2 puyeng saya liat js
    wkwkwk makin kren aja nih blognya pake ada pertanyaan segala pas mau koment
    oh iya gan tutor yang buat bisa masukin script ke koment bisa untuk tread komentar gak ya?

  • Unknown

    @Taufik Nurrohman skali2 gratis lah mas :)

  • Taufik Nurrohman

  • you

    saya coba mengaplikasikannya pada mesin pencari yang menggunakan ajak gagal terus mas... apakah kode ini harus diganti dan seperti apakah? var qs = window.location.search;
    qs = decodeURIComponent(qs.replace(/\?query=/, "").replace(/\+/g, " "));

    • Anonim

      saya coba dengan menambahkan script ini v tidak bekerja.. qra2 yang salah dimananya mas?(function ($) {
      var $form = $('#ajax-search-form'),
      $input = $form.find(':text');
      $form.append('<div id="search-result"></div>');
      var $result_container = $('#hasil');

      $form.on("submit", function () {
      var keyword = $input.val();
      $result_container.show().getId('loading...');
      $.ajax({
      url: 'http://info-kmu.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
      type: 'get',
      dataType: 'jsonp',

      success: function (json) {
      var entry = json.feed.entry,
      link, summary, thumbnail, skeleton = "";
      if (entry !== undefined) {
      skeleton = '<h4>Search results for keyword &#8220;' + keyword + '&#8221;</h4>';
      skeleton += '<a class="close" href="/">&times;</a><ol>';
      for (var i = 0; i < entry.length; i++) {
      if (i == entry.length) break;
      var mark = new RegExp(input.val, "ig"), entries = entry[i], title = entry[i].title.$t.replace(mark, '<mark>'+ input.val +'</mark>');
      for (var j = 0; j < entry[i].link.length; j++) {
      if (entry[i].link[j].rel == "alternate") {
      link = entry[i].link[j].href;
      break;
      }
      }
      thumbnail = ("media$thumbnail" in entries) ? '<img alt="" src="' + entries.media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s40-c") + '" width="40" height="40">' : "";
      summary = ("summary" in entries) ? entries.summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
      summary = summary.length > 100 ? summary.substring(0, 100) + '&hellip;' : summary;
      summary = summary.replace(mark, "<mark>"+keyword+"</mark>");
      skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + title + '</a><br>' + summary + '</li>';
      }
      skeleton += '</ol>';
      $result_container.html(skeleton);
      } else {
      // If the JSON is empty ... (entry === undefined)
      // Show the `not found` or `no result` message
      $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
      }
      },
      error: function () {

      // If error, show an error message
      $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
      }
      });
      return false;
      });

      // Fade out the search result container if the close button is clicked
      $form.on("click", ".close", function () {
      $result_container.fadeOut();
      return false;
      });
      })(jQuery);

      • Taufik Nurrohman

        Artikel ini sudah kadaluarsa dan sudah lama sekali tidak diperbaharui. Mungkin lebih baik kalau kapan-kapan Saya perbaharui secara total.

        • you

          yup.. terima kasih sblumnya

        • you

          sudah berhasil mas.. ternyata ada yang terlewat sedikit....

  • Anonim

    ternyata maksudnya highlight itu gini ya, nambah2 ilmu,, btw blog nya kereng :-bd

Komentar telah ditutup.