Mecha versi 2.6.4 sudah dirilis!

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

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

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?

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.