[Javascript] 站內搜尋 by Google Search API

最近被要求要製作站內搜尋，也就是嵌入 Google 搜尋引擎來查詢，查詢內容只限自訂的網站。這功能在很多網站上都有，網路上也有很多範例，但今天要介紹的是一個包好的 Javascript Library，很方便使用。

下圖是實作結果，預設搜尋的結果是顯示3筆，點More…會再加顯示3筆：

網頁只要下圖紅框這些 Code 就能執行：

Search.js 就是包好的 Library ，搜尋並顯示結果全都包好了，程式碼不難可自行了解一下，大概只有三個地方需要自行調整：
(1) 將 siteURL 改成要搜尋的 WebSite domain，以及設定 perPage，它是用來設定每次搜尋回傳的筆數，最大只能8筆。

var config = {
   siteURL: 'www.stackOverflow.com',  // The website you want to search. Change this to your website
   searchSite: true,
   type: 'web',  // include web、images、video、news…
   append: false,
   perPage: 3,  // A maximum of 8 is allowed by Google
   page: 0
}

(2) googleSearch(settings) 是主要的搜尋程式，基本上都不用改，如果要改的，就是More…的樣式吧。

// Checking if there are more pages with results, and deciding whether to show the More button:
var cursor = r.responseData.cursor;
if (+cursor.estimatedResultCount > (settings.page + 1) * settings.perPage) {
   $('

More...
', { id: 'more' })
     .appendTo(searchResultsDiv)
     .click(function () {
            googleSearch({ append: true, page: settings.page + 1 });
   $(this).fadeOut();
 });
}

(3) result(r)：定義回傳結果的樣式。


請注意! 這個 Search.js 是使用Google Search API，已於 2011/5/26 被 Google custom search API 取代，它還是能搜尋，只是每日有搜尋上限次數。


參考來源：stackOverflow