Saya telah menggunakan Bing Search API untuk sementara pada saya peter.hahndorf.eu situs. Situs ini benar-benar statis, tidak ada komponen sisi server. Jadi pencarian harus dilaksanakan dalam JavaScript. Kode relatif sederhana dan Bing memberikan jumlah yang tidak terbatas permintaan pencarian yang besar.
Namun baru-baru ini saya mencatat bahwa panggilan API tidak menghasilkan apa-apa sama sekali, sedangkan situs bing.com sendiri kembali hasil seperti yang diharapkan. Aku melihat sekitar sedikit secara online dan menemukan, bahwa API tidak menggunakan sumber data yang sama persis seperti situs web dan bahwa beberapa orang lain memiliki masalah dengan hasil mereka juga.
Jadi saya beralih ke orang-orang pencari lainnya. Saya telah menggunakan sebuah Google API yang lebih tua pada sisi server beberapa waktu lalu tapi kali ini saya ingin mengganti pelaksanaan sisi klien.
Aku tidak hanya ingin menempatkan Google menciptakan fragmen kotak pencarian HTML di situs saya, saya ingin mendapatkan hanya hasil pencarian melalui JSON tanpa goo Google di sekitarnya.
Anda dapat melihat pencarian bekerja di peter.hahndorf.eu/search.html
Mereka telah sesuatu yang disebut 'JSON / Atom Custom Search API', dan saya akan menjelaskan bagaimana menggunakannya:
Untuk mulai dengan, Anda memerlukan akun Google, tenang kemungkinan Anda sudah memiliki satu. Berikutnya Anda perlu menentukan mesin pencari kustom Anda sendiri. Hal ini memungkinkan Anda untuk mencari hanya situs Anda tidak seluruh web. Pergi ke http://www.google.com/cse/manage/all dan membuat mesin pencari baru, ikuti langkah mereka dan Anda menerima 'Search engine unik ID' yang kemudian Anda butuhkan dalam kode Anda.
Berikutnya Anda memerlukan kode API. Ikuti petunjuk di http://code.google.com/apis/customsearch/v1/getting_started.html#get_account, kunci API adalah parameter kedua yang harus Anda berikan kepada Google setiap kali Anda menggunakan API. Rencana API gratis hanya memungkinkan Anda 100 pertanyaan per hari, yang cukup untuk situs kecil saya tapi untuk situs yang lebih besar Anda mungkin harus membayar mereka.
Anda sekarang dapat menguji pencarian kustom Anda dengan hanya menempatkan berikut di address bar browser Anda:
https://www.googleapis.com/customsearch/v1?key=INSERT-YOUR-KEY&cx=INSERT-YOUR-ENGINE-ID&q=YOUR-SEARCH-TERM&alt=json
Anda harus mendapatkan halaman dengan hasil pencarian diformat dalam JSON.
Membangun halaman pencarian:
Mari kita mulai dengan html:
<input type="text" id="txtSearchTerm" size="40" />
<button id="btnSearch" style="display:none;">Start Search</button>
<noscript>JavaScript is required for this page.</noscript>
<div id="searchResult"></div>
<div id="output"></div>
<div>
<a href="#" id="lnkPrev" title="Display previous result page" style="display:none;">Previous</a> <span id="lblPageNumber" style="display:none;"></span> <a href="#" id="lnkNext" title="Display next result page" style="display:none;">Next</a>
</div>
Mari kita lihat, kita mulai dengan sebuah field input dan tombol. Karena tanpa JavaScript pencarian kami tidak bekerja kita menyembunyikan tombol dan menampilkan pesan ke pengguna menggunakan 'noscript' tag.
Berikutnya kami memiliki tiga divs, yang pertama 'searchResult' adalah untuk menampilkan ringkasan hasil pencarian atau pesan kesalahan. Yang kedua 'output' adalah untuk hasil aktual dan yang ketiga adalah untuk navigasi ke halaman berikutnya atau sebelumnya. API kembali hingga 10 catatan per panggilan dan hingga 110 catatan total. Saya tidak menerapkan sejumlah link untuk melompat ke halaman hasil langsung. Saya merasa tombol 'Next' cukup baik.
Kita juga perlu menyertakan file script dan jQuery, saya selalu menempatkan ini di akhir halaman:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="googlesearch.js"></script>
Ketika mengembangkan script Anda akan melakukan pengujian banyak dan mungkin mengalami 100 pertanyaan per batas hari, untuk bekerja di sekitar ini saya membuat sebuah halaman hasil boneka lokal. Gunakan url dari sebelumnya, tetapi bukan & alt = json parameter pada akhir, penggunaan & callback = SearchCompleted. Juga memastikan bahwa istilah pencarian yang Anda gunakan kembali lebih dari 10 hasil.
https://www.googleapis.com/customsearch/v1?key=INSERT-YOUR-KEY&cx=INSERT-YOUR-ENGINE-ID&q=YOUR-SEARCH-TERM& callback = SearchCompletedhttps://www.googleapis.com/customsearch/v1?key=INSERT-YOUR-KEY&cx=INSERT-YOUR-ENGINE-ID&q=YOUR-SEARCH-TERM& callback=SearchCompleted
sekarang Anda mendapatkan hasil yang sedikit berbeda yang JSONP, itu membungkus data JSON dalam fungsi panggilan JavaScript. Menyimpan halaman ke dalam sebuah file teks bernama dummy.js pada server perkembangan Anda. Daripada menelepon Google untuk hasil, sekarang kita akan menggunakan file ini.
Membuat file 'googlesearch.js' untuk logika kita, mulai dengan dokumen fungsi siap:
$(function ()
{
$('#btnSearch').show().click(function () { Search($("#txtSearchTerm").val(),0);});
$('#lnkPrev').click(function () { Search($("#txtSearchTerm").val(),-1); });
$('#lnkNext').click(function () { Search($("#txtSearchTerm").val(),1); });
});
Kami hanya menyiapkan event handler untuk link dan tombol yang kami juga unhide, parameter kedua 0, -1 dan 1 adalah untuk paging.
Berikutnya membuat fungsi pencarian yang memulai panggilan API:
function Search(term, direction)
{
url = "http://localhost/dummy.js?callback=?";
$.getJSON(url, '', SearchCompleted);
}
Url poin ke file boneka kami, melihat callback =? bagian sebagai parameter. Itu pasti tidak membuat perbedaan dalam file statis kami apa parameter yang kita sebut dengan tetapi kita masih membutuhkannya. Ini memberitahu sihir jQuery Ajax untuk mengobati hasil sebagai JSONP dan jalankan setelah menerima itu. Penamaan boneka berkas * Js memberitahu server web untuk mengirim isi file dengan Content-Type header 'aplikasi / x-javascript', yang diperlukan untuk JSONP.
Jadi apa yang sebenarnya terjadi di sini? Hanya melakukan panggilan AJAX untuk data JSON dari Google tidak bekerja karena kita hanya bisa melakukan panggilan AJAX untuk domain kita sendiri, bukan yang berbeda seperti Google.com. Untuk mengatasi JSONP ini membungkus data dalam JavaScript karena <script> tag di html memungkinkan atribut src untuk menunjuk ke domain yang berbeda. JQuery mengeksekusi JavaScript diterima dari server. Itu tidak apa-apa lagi selain memanggil callback kami fungsi passing dalam data JSON sebagai satu-satunya parameter. Anda dapat melihat bahwa dalam file dummy.js kami.
Versi sederhana dari fungsi SearchCompleted akan terlihat seperti ini:
function SearchCompleted(response)
{
var html = "";
for (var i = 0; i < response.items.length; i++)
{
html += response.items[i]. htmlTitle + "<br />";
}
$("#output").html(html);
}
Kami loop melalui data JSON dan membangun string HTML yang kemudian kami tampilkan dalam output div kami.
Kemungkinan besar kita ingin melakukan sedikit lebih dengan hasil, seperti menghubungkan kembali ke halaman yang sebenarnya. Lihatlah berkas dummy.js kami untuk melihat semua data yang kita dapatkan dari Google:] .htmlTitle, .link dan .htmlSnippet adalah yang paling berguna.
Anda dapat melihat implementasi yang sebenarnya untuk melihat contoh bagaimana untuk memijat hasil pencarian sebelum menampilkan mereka. Peter.hahndorf.eu/search.html dan peter.hahndorf.eu/css/googlesearch.js
Menggunakan hal yang nyata
Sekarang bahwa hasil penelitian kami terlihat baik-baik saja, kita bisa beralih ke hasil Google, kita perlu mengubah url dalam fungsi Search:
var url = "https://www.googleapis.com/customsearch/v1?key="+ mGoogleApiKey + "&num=10&cx=" + mGoogleCustomSearchKey + "&start=" + startIndex + "&q=" + escape(term) + "&callback=?";
mGoogleApiKey dan mGoogleCustomSearchKey dua variabel yang saya set di tempat lain dengan nilai yang sebenarnya. Parameter awal yang dibutuhkan untuk paging dan kita lagi perlu callback =? memberitahu JQuery untuk melakukan JSONP sihir.
Pager:
Sejauh ini kita selalu hanya mendapatkan 10 pertama hasil. Jadi mari kita menambahkan beberapa paging dasar. Biasanya ini termasuk sedikit logika, untungnya Google memberikan bantuan. Jika Anda melihat file dummy.js, Anda melihat 'Nextpage' dan 'permintaan' di bawah 'permintaan'. Di sini kita bisa melihat total hasil di (response.queries.request [0] .totalResults) dan indeks awal untuk halaman berikutnya (response.queries.nextPage [0] .startIndex). Yang harus kita lakukan adalah memeriksa apakah ada nilai seperti itu dan kemudian unhide link yang sesuai dan ingat nilai startIndex untuk panggilan Ajax berikutnya.
Sekali lagi melihat peter.hahndorf.eu/css/googlesearch.js untuk kode.
Contoh respon json Google Costum Search dengan kata kunci 'trik blog' sebanyak 3 hasil :
https://www.googleapis.com/customsearch/v1?key=YourGoogleKey&num=3&cx=YouCseId&start=1&q=trik+blog
{
"kind": "customsearch#search",
"url": {
"type": "application/json",
"template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&cref={cref?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json"
},
"queries": {
"nextPage": [
{
"title": "Google Custom Search - trik blog",
"totalResults": "1010000",
"searchTerms": "trik blog",
"count": 3,
"startIndex": 4,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "YouCseId"
}
],
"request": [
{
"title": "Google Custom Search - trik blog",
"totalResults": "1010000",
"searchTerms": "trik blog",
"count": 3,
"startIndex": 1,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "YouCseId"
}
]
},
"context": {
"title": "www-bli-bli-info"
},
"searchInformation": {
"searchTime": 0.238563,
"formattedSearchTime": "0,24",
"totalResults": "1010000",
"formattedTotalResults": "1.010.000"
},
"items": [
{
"kind": "customsearch#result",
"title": "Kumpulan Trick Blog",
"htmlTitle": "Kumpulan \u003cb\u003eTrick Blog\u003c/b\u003e",
"link": "http://all-trick-blog.blogspot.com/",
"displayLink": "all-trick-blog.blogspot.com",
"snippet": "Salam Blogger, kali ini saya tidak memposting tips trick komputer pemula dan \nsaya juga tidak memposting tips trik blog. Kali ini saya ingin berterima kasih ...",
"htmlSnippet": "Salam Blogger, kali ini saya tidak memposting tips trick komputer pemula dan \u003cbr\u003e\nsaya juga tidak memposting tips \u003cb\u003etrik blog\u003c/b\u003e. Kali ini saya ingin berterima kasih ...",
"cacheId": "V5H6mMe9URkJ",
"formattedUrl": "all-trick-blog.blogspot.com/",
"htmlFormattedUrl": "all-\u003cb\u003etrick\u003c/b\u003e-\u003cb\u003eblog\u003c/b\u003e.\u003cb\u003eblogspot\u003c/b\u003e.com/",
"pagemap": {
"cse_image": [
{
"src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Y5_5UoB7nMEw5Toxh5_Np2VlbwEuQfMbmYeOS62q2NTlEa3yEwEUcVQTLz4zSQU9QzEL5TgiUHl2sHKZ4H06oGwU-lCLgJ1I0TfpdcPjus-EdX8zYbhSI9GtWURrLWsA9XXw18WLykk/s1600/free-link-exchange.gif"
}
],
"cse_thumbnail": [
{
"width": "172",
"height": "100",
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSELcQEHpALLXWHeOqrHef9jfQ106g_S4QS50JHNrFwfEHM9wTShOjol8w"
}
],
"metatags": [
{
"alexaverifyid": "VYTePhVhIG7bUjRFmr-wdIOnBjg",
"viewport": "width=1100"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Blog Design: Kumpulan Tips Trik Desain Blog Buka-Rahasia ...",
"htmlTitle": "\u003cb\u003eBlog\u003c/b\u003e Design: Kumpulan Tips \u003cb\u003eTrik\u003c/b\u003e Desain \u003cb\u003eBlog\u003c/b\u003e Buka-Rahasia \u003cb\u003e...\u003c/b\u003e",
"link": "http://buka-rahasia.blogspot.com/2011/10/blog-design-kumpulan-tips-trik-desain.html",
"displayLink": "buka-rahasia.blogspot.com",
"snippet": "8 Okt 2011 ... kumpulan tutorial cara desain blog baik melalui hack maupun trik HTML, CSS, \ndan Javascript yang sudah saya tulis di ...",
"htmlSnippet": "8 Okt 2011 \u003cb\u003e...\u003c/b\u003e kumpulan tutorial cara desain \u003cb\u003eblog\u003c/b\u003e baik melalui hack maupun \u003cb\u003etrik\u003c/b\u003e HTML, CSS, \u003cbr\u003e\ndan Javascript yang sudah saya tulis di ...",
"cacheId": "HH7rUtnAV2QJ",
"formattedUrl": "buka-rahasia.blogspot.com/.../blog-design-kumpulan-tips-trik-desain.html",
"htmlFormattedUrl": "buka-rahasia.\u003cb\u003eblogspot\u003c/b\u003e.com/.../\u003cb\u003eblog\u003c/b\u003e-design-kumpulan-tips-\u003cb\u003etrik\u003c/b\u003e-desain.html",
"pagemap": {
"cse_image": [
{
"src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyN5mOA5dWVHUbEm2zgJUnbobgWa06dUKoTIuJAZbwYQDs7cITTaMRcS0FldDSJ4LP_iN-A1zSvZ2TKRCbnX8cYI2mcxBW0NUPC-6m3RGF0N3VutKHJra1eDF5FztiD-5SrBSVnV93zF5P/s1600/Newspaper_Feed_110x110.png"
}
],
"organization": [
{
"name": "Buka Rahasia Blogspot",
"logo": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidLBGvtQRJG_mqNyjQWmDy4850yOuLyyBUKUJj_am0TOviDoQHi5e5RioImf8oXQy-lL-ve66yAfuoSCBhXUuyzvQNkP7obX2P9f966EfM0LtksfnNQugDQR121DuZx17NbzcQrw69zOHT/s1600/bukarahasiablogspot.png"
}
],
"cse_thumbnail": [
{
"width": "88",
"height": "88",
"src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNmo_HZZ8mgaiaXFHwYjyE5jPxWLCtNDV-FbMjbewVDNVlXDDovlSh"
}
],
"Breadcrumb": [
{
"title": "Home",
"url": "Home"
},
{
"title": "Blog Design",
"url": "Blog Design"
}
],
"metatags": [
{
"alexaverifyid": "bHUfDcDvgqB6x1-c689yyODlmVg",
"msvalidate.01": "3E7366A7F31214347076587FC20200D9",
"y_key": "c72824c527437d1f",
"fb:admins": "1055553887",
"pressabout-site-verification": "9ec2d9cb1d8334cdbc29f5d189e2ee66",
"updowner-verification": "b8d50887f9cc210d3d63cd1642f45ef5",
"og:title": "Buka Rahasia Blogspot: Blog Design: Kumpulan Tips Trik Desain Blog Buka-Rahasia.Blogspot.Com",
"og:url": "http://buka-rahasia.blogspot.com/2011/10/blog-design-kumpulan-tips-trik-desain.html",
"og:site_name": "Buka Rahasia Blogspot",
"og:image": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPL1WKMbgLAWL1b3ltltAPA8cS6Ro6_1B158yi4rmN7Q3BqistK8geBb1LcacNgnpJZ_GZmOgzj16PE7p3O5M9J5occ7yRanjtAi_fZWOTDB5TCVzTi-C6aeM1jsaW9Ha5TNLnekuahwKw/s72-c/bukarahasiablogspotcom-blog-design.jpg",
"fb:app_id": "163757973744348",
"og:type": "article",
"verifikasi-penjejak": "4de57e0afa4dbd83f60dab7f4d478998",
"verify-blogdash": "c1ebbe228776ca62633409825f417077",
"google-translate-customization": "22aee65b98f7258f-632a7ffbdc2cf02e-g9be78130872cdfa7-19",
"author": "Ahmad Khoirul Azmi",
"twitter:card": "summary_large_image",
"twitter:title": "Buka Rahasia Blogspot: Blog Design: Kumpulan Tips Trik Desain Blog Buka-Rahasia.Blogspot.Com",
"twitter:url": "http://buka-rahasia.blogspot.com/2011/10/blog-design-kumpulan-tips-trik-desain.html",
"twitter:domain": "http://buka-rahasia.blogspot.com/",
"twitter:site": "@bukarahasiablog",
"twitter:creator": "@ahkhoazmi",
"twitter:description": "kumpulan tutorial cara desain blog baik melalui hack maupun trik HTML, CSS, dan Javascript yang sudah saya tulis di buka-rahasia.blogspot.com",
"twitter:image:width": "435",
"twitter:image:height": "375",
"twitter:image:src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPL1WKMbgLAWL1b3ltltAPA8cS6Ro6_1B158yi4rmN7Q3BqistK8geBb1LcacNgnpJZ_GZmOgzj16PE7p3O5M9J5occ7yRanjtAi_fZWOTDB5TCVzTi-C6aeM1jsaW9Ha5TNLnekuahwKw/s1600/bukarahasiablogspotcom-blog-design.jpg"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Trik Tips Blog: Tutorial Bloggger",
"htmlTitle": "\u003cb\u003eTrik\u003c/b\u003e Tips \u003cb\u003eBlog\u003c/b\u003e: Tutorial Bloggger",
"link": "http://trikaja.blogspot.com/",
"displayLink": "trikaja.blogspot.com",
"snippet": "cara trik tips blogger. ... Diberdayakan oleh Blogger. Tutorial Bloggger | Trik Tips \nBlog. trikaja.blogspot.com. Main menu section. SEO Blog · Tips Blogger · Trik ...",
"htmlSnippet": "cara \u003cb\u003etrik\u003c/b\u003e tips \u003cb\u003eblogger\u003c/b\u003e. ... Diberdayakan oleh \u003cb\u003eBlogger\u003c/b\u003e. Tutorial Bloggger | \u003cb\u003eTrik\u003c/b\u003e Tips \u003cbr\u003e\n\u003cb\u003eBlog\u003c/b\u003e. trikaja.\u003cb\u003eblogspot\u003c/b\u003e.com. Main menu section. SEO \u003cb\u003eBlog\u003c/b\u003e · Tips \u003cb\u003eBlogger\u003c/b\u003e · \u003cb\u003eTrik\u003c/b\u003e ...",
"cacheId": "K01hk5Cb1aoJ",
"formattedUrl": "trikaja.blogspot.com/",
"htmlFormattedUrl": "\u003cb\u003etrik\u003c/b\u003eaja.\u003cb\u003eblogspot\u003c/b\u003e.com/",
"pagemap": {
"cse_image": [
{
"src": "http://2.bp.blogspot.com/-A7twRw_hxQg/UhLu5y-jA3I/AAAAAAAABbc/PjE3h2n-T1A/s1600/do+follow+blog.jpg"
}
],
"cse_thumbnail": [
{
"width": "256",
"height": "118",
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSxRz3rFo5CklDaPTmPTtXrC_R48voAjCF_G1jmwZIccAAyQBNviaGWIds"
}
],
"metatags": [
{
"viewport": "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"
}
]
}
}
]
}
ConversionConversion EmoticonEmoticon