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:
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>
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
@Rizky Wardiansyah Bisa-bisa...
[note]Terkait: Memanfaatkan JQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Komentar Blogger, Memasukkan Video ke dalam Komentar Blogger[/note]
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 “' + keyword + '”</h4>';
skeleton += '<a class="close" href="/">×</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) + '…' : 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="/">×</a><strong>No result!</strong>');
}
},
error: function () {
// If error, show an error message
$result_container.html('<a class="close" href="/">×</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