Beberapa waktu yang kemudian Saya pernah menuliskan cara menampilkan hasil penelusuran dengan JSON Blogger tanpa harus berpindah dari halaman awal menuju halaman hasil penelusuran dengan JavaScript (Anda sanggup membacanya di sini).
Melalui jQuery $.ajax() kita sanggup meniadakan penyisipan script callback dan pribadi memanggil JSON dengan cara menyerupai 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 jikalau dijabarkan akan menjadi menyerupai 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 pribadi 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 sanggup pribadi memproses data JSON yang akan ditransfer pada ketika 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 dipakai untuk mencegah formulir membawa kita menuju halaman hasil penelusuran ketika kita men-submit kata kunci pencarian });Pengambilan data JSON dilakukan oleh jQuery $.ajax(), sehingga kita tidak perlu menyisipkan skrip callback ke dalam area <head> menyerupai 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 ialah 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 jikalau blog Anda sudah dilengkapi dengan jQuery.
Pertama-tama masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin aba-aba 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 aba-aba yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan Widget.
Sumber https://www.dte.web.id/