Kotak Penelusuran Blogger dengan AJAX jQuery
Beberapa waktu yang lalu Saya pernah menuliskan cara menampilkan hasil penelusuran dengan JSON Blogger tanpa harus berpindah dari halaman awal menuju halaman hasil penelusuran dengan JavaScript (Anda bisa membacanya di sini).
Melalui jQuery $.ajax()
kita bisa meniadakan penyisipan script callback dan langsung memanggil JSON dengan cara seperti ini:
$('#search-form').on("submit", function() {
$.ajax({
url: '/feeds/posts/summary?alt=json-in-script&q=KATA_KUNCI',
type: 'get',
dataType: 'jsonp',
success: function(json) {
…
}
});
});
Sehingga jika dijabarkan akan menjadi seperti ini:
HTML Formulir
<form action="/search" id="ajax-search-form">
<input type="text" name="q">
<input type="submit" value="Search">
</form>
jQuery
(function($) {
var $form = $('#ajax-search-form'),
$input = $form.find(':text');
$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');
$form.on("submit", function() {
var keyword = $input.val();
$result_container.show().html('Loading...');
$.ajax({
url: 'http://nama_blog.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, skeleton = "";
if (typeof 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++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
skeleton += '</ol>';
$result_container.html(skeleton);
} else {
$result_container.html('<a class="close" href="/">×</a><strong>No result!</strong>');
}
},
error: function() {
$result_container.html('<a class="close" href="/">×</a><strong>Error loading feed.</strong>');
}
});
return false;
});
$form.on("click", ".close", function() {
$result_container.fadeOut();
return false;
});
})(jQuery);
Cara Kerja
Pertama-tama kita tangkap beberapa elemen penting yaitu formulir pencarian dan elemen input kata kunci pencarian:
var $form = $('#ajax-search-form'), // Mendapatkan elemen formulir
$input = $form.find(':text'); // Mendapatkan elemen input bertipe teks (penampung kata kunci pencarian)
Sisipkan sebuah elemen HTML secara tidak langsung sebagai kontainer hasil pencaran:
$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');
Setelah itu kita berlakukan event .submit()
atau .on("submit")
pada formulir untuk kemudian kita bisa langsung memproses data JSON yang akan ditransfer pada saat yang bersamaan ketika kita menekan tombol Enter pada papan ketik atau mengeklik tombol penelusuran di dalam formulir:
$form.on("submit", function() {
$.ajax(url, type, dataType, success, error); // Dapatkan data dan proses data di sini...
return false; // <= Ini digunakan untuk mencegah formulir membawa kita menuju halaman hasil penelusuran saat kita men-submit kata kunci pencarian
});
Pengambilan data JSON dilakukan oleh jQuery $.ajax()
, sehingga kita tidak perlu menyisipkan skrip callback ke dalam area <head>
seperti dalam metode JavaScript mentah pada umumnya:
$.ajax({
url: 'http://nama_blog.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, skeleton = "";
if (typeof 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++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
skeleton += '</ol>';
$result_container.html(skeleton);
} else {
$result_container.html('<a class="close" href="/">×</a><strong>No result!</strong>');
}
},
error: function() {
$result_container.html('<a class="close" href="/">×</a><strong>Error loading feed.</strong>');
}
});
keyword
adalah variabel. Nilainya diambil dari elemen input teks:
var keyword = $input.val();
// `/feeds/posts/summary?alt=json-in-script&q=keyword&max-results=9999`
Integrasi Widget ke Blogger
Widget ini hanya akan bekerja jika blog Anda sudah dilengkapi dengan jQuery.
Pertama-tama masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:
<style scoped="scoped">
#ajax-search-form {
position:relative;
font:normal normal 13px/normal Helmet,FreeSans,Sans-Serif;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form input {
border:1px solid #ccc;
border-top-color:#999;
background-color:white;
font:inherit;
color:black;
margin:0 0;
padding:5px 5px;
width:180px;
}
#ajax-search-form input::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
#ajax-search-form input[type="submit"] {
width:auto;
background-color:#084670;
border-color:transparent;
color:#B4D8F0;
font-weight:bold;
cursor:pointer;
padding-left:7px;
padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
border:1px solid #bbb;
background-color:white;
padding:10px 15px;
margin:2px 0;
width:auto;
height:auto;
position:absolute;
top:100%;
left:0;
z-index:99;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
margin:0;
padding:0;
}
#search-result h4,
#search-result strong {
display:block;
margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
display:block;
position:absolute;
top:6px;
right:10px;
line-height:normal;
color:#17950F;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
<input type="text" name="q"/>
<input type="submit" value="Search"/>
</form>
<script>
(function($) {
var $form = $('#ajax-search-form'),
$input = $form.find(':text');
// Append a search result container to the search form
$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');
// When the keyword is submitted…
$form.on("submit", function() {
// Get the input value
var keyword = $input.val();
// Show the search result container and insert a `Loading...` text
$result_container.show().html('Loading...');
// Get the blog JSON via $.ajax() to show the search result
// The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
$.ajax({
url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
type: 'get',
dataType: 'jsonp',
// If success, grab the search result list…
success: function(json) {
var entry = json.feed.entry,
link, skeleton = "";
if (typeof 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++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></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);
</script>
Ganti kode yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan Widget.
66 Komentar
Unknown
simple n cool :-bd
Unknown
keren dan waaaaaaaaaaaaaw x@
Rosyd Aqbar
wah, ini ringan mas, tapi apakah kita bisa mengedit hasil dari Searchnya ?
misal kita mau memberi warna pada Kata kunci seperti fungsi Find pada browser gitu :D
Taufik Nurrohman
Pakai
RegExp()
, lalu ubah karakter judulnya:Demo: http://jsfiddle.net/tovic/N8H7W/
Rosyd Aqbar
sip deh mas, apakah Search tools ini sama seperti punyanya mas tofik ?
kalo iya, kok ada sebuah fungsi di URLnya mas ?
contoh saya mau Search "jquery"
di akhir URL ada tambahan ...?q=jquery sebenernya saya pengin yang kaya gitu, tapi saya coba yang ini dulu deh :-bd
Beben Koben
kalo urusan search mencari sudah enak dah pakek jQuery AJAX API, KOMPLIT.
undercover-blogger.blogspot.com/2012/10/google-web-search-api.html
tinggal add di add gadget blogger :D
di judul aja nih, enggak sekalian di adain headline artikelnya!
good good good :-bd
Surga Kenari
mas Taufik,
saya menggunakan search bawaan dari widget google.
ketika saya search mengapa 'isinya' poisisinya bisa di atas banget ya?
butuh pencerahan mas..
Taufik Nurrohman
Surga Kenari
masih ga effect mas.. bisa di cek lagi http://sdftyujklvbn.blogspot.com
Unknown
gimana cara menerapkannya pada navigasi?
Unknown
Mantap sob, thank infonya telah berbagi share
Unknown
permisi,ijin pakai bbrp kode nya. mksh
Unknown
kode untuk tombol close yang mana mas mohon pencerahannya
Adi
kalau pengen ganti icon searchnya gimana mas?
tolong pencerahanya icon search yg warna biru di atas kurang keren
Taufik Nurrohman
Ganti
<input type="submit" value="Search" />
menjadi:Unknown
Kalau di terapkan di Menu Navigasi Gimana ?
Anonim
wah, keren tutorialnya mas, izin coba ya :)
Unknown
Di blog saya kok hasil penelusurannya pindah ke halaman lain ? Tolong di Cek
http://aldhinya.blogspot.com/
. thanks..Admin
apakah alamat blognya sudah di ubah?
Unknown
Sudah..
Admin
apakah blog anda sudah terpasang jquery?
Unknown
Sudah.. saya sudah mengikuti semua cara di atas, anehnya di blog saya hasil penelusurannya masih tetep pindah ke halaman baru..
Taufik Nurrohman
Kode JavaScript ini tidak berada di dalam event DOM Ready, jadi harus diletakkan setelah formulir penelusuran, misalnya di atas
</body>
Atau bisa juga dengan cara mengubah bagian ini:
menjadi seperti ini, jika ingin tetap meletakkan kode JavaScript di dalam
<head></head>
:Unknown
Terima Kasih atas bantuannya, sekarang sudah Bisa... \o/ :-bd :D
Unknown
Kalau Modifikasi Search Resultnya jadi kayak begini gimana ya ?
Anonim
hi, kalau saya hendak menggunakan feed selain daripada blogger boleh ke?
sample -
url: 'http://www.rssmix.com/u/3828765/rss.xml?alt=json-in-script&q=' + keyword + '&max-results=9999',
bisa gak? saya sudah cuba di jsfiddle, tapi ada masalah. ada solusinya gak?
Taufik Nurrohman
Kalaupun bisa, mungkin format data, dukungan dan logika parameter URL serta penamaan key di dalam JSON mereka akan berbeda. Harus dibuat fungsi yang baru lagi. Untuk mengetahui apakah JSON bisa dijadikan widget atau tidak bisa dicoba dengan cara mengakses URL tersebut pada adress bar atau membaca dokumentasi tentang layanan tersebut.
Saya tidak tahu soal layanan ini, tapi untuk mengakses file dengan format JSON, gunakan ekstensi
.json
yang (ternyata) tersedia ⇒ http://www.rssmix.com/u/3828765/rss.jsonCoba bandingkan dengan ini ⇒ http://dte-feed.blogspot.com/feeds/posts/default?alt=json
you
Mas, saya sudah coba tahap demi tahap tapi hasilnya ketika melakukan pencarian itu Error loading page.. Apa artinya itu kata kunci tidak ditemukan ato ada kelalaian dari saya.?
you
maksudnya Error loading feed
Anonim
sudah berhasil mas tapi saya kesulitan untuk menambahkan summary dan thumbnailnya... akan saya coba terus tpi kalau gagal mhon bantuannya mas..
Taufik Nurrohman
Taufik Nurrohman
you
Apakah untuk menempatkan hasil penelusuran di elemen tertentu diperlukan pemanggilan dengan menambahkan
getElementById
Taufik Nurrohman
Coba ganti nilai variabel
$result_container
menjadi seperti ini dan lihat sendiri hasilnya:you
makasih mas... ternyata simple ya.. kalo kita tahu dan faham JS.. kalo boleh tahu refferensi belajar JS didapat dari mana mas... seperti buku apa ato gmn?
Taufik Nurrohman
Baguslah kalau sudah paham sama logikanya. Sering-sering praktek saja.
Unknown
Lebih sulit dari try out matematika dan ipa nih mas ~x(
Unknown
Cara membuat Search Result di statik page gimana boss
Taufik Nurrohman
⇒ https://www.google.com/search?q=memasang+google+cse+di+blogspot
Unknown
makasih kang , saya sudah berhasil \o/
Unknown
Trimssss...!!!
Unknown
Mas kalau untuk membatasi jumlah pencarian'y gimana ??? misalkan hasil yg ditampilkan hanya 5
Taufik Nurrohman
Sama dengan cara yang ini → /2012/03/membatasi-jumlah-posting-pada-halaman.html
Unknown
sukses hehe .. hatur nuhun mas
http://reactorontohod.blogspot.com/
Unknown
Maaf mas taufik ternyata sudah bisa hehe
keburu nyerah tadinya ... makasih mas
Apradiz Renfaan
:-bd makasih kang
budkalon
Kang, saya udah nyoba ngebagi hasil pencarian ke dalam beberapa halaman, tapi saya gagal terus dalam ngebuat fungsi next() sama prev()-nya. Udah ngulik soal start-index sama max-result, tapi gagal terus. Kira-kira script buat fungsi next() sama prev()-nya gimana, ya?
Mohon bantuannya, Kang 0:)
Taufik Nurrohman
Saya tambahkan fungsi next/prev di sini → http://jsbin.com/sutevi/edit?html,output
Anonim
Keren gan, tapi ga jalan kalo pasang langsung di template
Unknown
pak, kalau di form search-nya dikasih option mencari di blog atau mencari di google cse, nambahi sekripnya bagaimana? *kliyeng2 :p
Taufik Nurrohman
Saya kasi tahu dasarnya saja ya:
Demo: http://output.jsbin.com/zagafilowi
Unknown
kalo dibikin seperti ini, pasti selalu keluar layout..
#ajax-search-form input { width:100%}
Taufik Nurrohman
Nggak akan keluar kalau nggak ada tombolnya. Lalu juga:
Metode ini mungkin bisa menjadi solusi → http://cssdeck.com/labs/fluid-width-search-box
Addict Covers
Hii, i love this script, tell me something, its possible to add more then one source for research, like two blogger feeds?
Taufik Nurrohman
Add this snippet just before the
$.ajax({
line:Addict Covers
thank you for the reply! it's amazing!
If i may, i'm using the version with thumbnails that you kindly released a few comments up and i'm using this to show thumbnails:
$.ajax({
url: 'https://www.blogname.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
type: 'get',
dataType: 'jsonp',
// If success, grab the search result list…
success: function(json) {
var entry = json.feed.entry,
link, summary, thumbnail, skeleton = "";
if (entry !== undefined) {
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(//s[0-9]+-c/, "/s500") + '" width="100%" height="auto"!important>' : "";
summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
summary = summary.length > 0 ? summary.substring(0, 0) + '…' : summary;
skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
}
skeleton += '</ol>';
$result_container.append(skeleton);
}
}
});
it's working fine, but even with the returning the results properly the "No Result" message still showing
Addict Covers
Addict Covers
and i forgot, i wish open the links in the result in another page, like blank stuff, if you help with this thing i'll be appreciated, sorry for bothering
Taufik Nurrohman
I’ll take my time to create another AJAX search widget with simpler installation.
Addict Covers
thanks for you hard work!
Taufik Nurrohman
Take a look here 😉