Kotak Penelusuran Blogger dengan AJAX jQuery

Tabel Konten
  1. HTML Formulir 
  2. jQuery 
  • Cara Kerja 
  • Integrasi Widget ke Blogger 
  • Ajax Search Form with jQuery
    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 &quot;' + keyword + '&quot;</h4>';
                        skeleton += '<a class="close" href="/">&times;</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="/">&times;</a><strong>No result!</strong>');
                    }
                },
                error: function() {
                    $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
                }
            });
            return false;
        });
        $form.on("click", ".close", function() {
            $result_container.fadeOut();
            return false;
        });
    })(jQuery);

    Lihat Demo

    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 &quot;' + keyword + '&quot;</h4>';
                skeleton += '<a class="close" href="/">&times;</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="/">&times;</a><strong>No result!</strong>');
            }
        },
        error: function() {
            $result_container.html('<a class="close" href="/">&times;</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 &quot;' + keyword + '&quot;</h4>';
                        skeleton += '<a class="close" href="/">&times;</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="/">&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);
    </script>

    Ganti kode yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan Widget.

    Lihat Demo Lihat Demo: Dengan Navigasi

    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:

        var mark = new RegExp(keyword, "ig");
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t.replace(mark, "<span style=\'background-color:pink;text-decoration:underline;\'>" + keyword + "</span>") + '</a></li>';

        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

        #CustomSearch1 .widget-content {margin-top:15px}
        #CustomSearch1_form {position:relative}
        • 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:

        <input type="image" src="URL-gambar.jpg" />
    • 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:

                (function($) {
                ...
                })(jQuery);

                menjadi seperti ini, jika ingin tetap meletakkan kode JavaScript di dalam <head></head>:

                (function($) {
                $(document).ready(function() {
                ...
                });
                })(jQuery);
                • 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.json

        Coba 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

            <style scoped="scoped">
            #ajax-search-form {
            position:relative;
            font:normal normal 13px/normal Arial,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;
            max-width:400px;
            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 0}
            #search-result ol a {font-weight:bold}
            #search-result ol a:hover {text-decoration:underline}
            #search-result li {
            overflow:hidden;
            list-style:none;
            margin-top:10px;
            }
            #search-result .close {
            display:block;
            position:absolute;
            top:6px;
            right:10px;
            line-height:normal;
            color:#17950F;
            }
            #search-result strong {color:#B75252}
            #search-result img {
            float:left;
            margin:2px 10px 5px 0;
            padding:2px;
            border:1px solid #ccc;
            }
            </style>
          • Taufik Nurrohman

            <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://latitudu.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, 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++) {
            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/, "/s40-c") + '" width="40" height="40">' : "";
            summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
            summary = summary.length > 100 ? summary.substring(0, 100) + '&hellip;' : summary;
            skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</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);
            </script>
    • 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:

        var $result_container = $('#Blog1');
        • 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

    • 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:)

    • 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:

        <form action="/search" method="get" onsubmit="window.open(this.r.value + '?q=' + encodeURIComponent(this.q.value));return false;" target="_blank">
        <p>
        <input name="q" type="text"/>
        <button type="submit">Cari</button>
        </p>
        <p>
        <label>
        <input name="r" type="radio" value="/search" checked="checked"/> cari di blog
        </label>
        <label><input name="r" type="radio" value="https://www.google.com/search"/> cari di google</label>
        </p>
        </form>

        Demo: http://output.jsbin.com/zagafilowi

    • Unknown

      kalo dibikin seperti ini, pasti selalu keluar layout..
      #ajax-search-form input { width:100%}

    • 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:

        $.ajax({
        url: 'http://nama_blog_2.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") {
        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>';
        }
        $result_container.append(skeleton);
        }
        }
        });
        • 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) + '&hellip;' : 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

          $.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) + '&hellip;' : summary;
          skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
          }
          skeleton += '</ol>';
          $result_container.append(skeleton);
          }
          }
          });
        • 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

    Komentar telah ditutup.