地球上的大熊, 巧遇上火星的你

將Google 自訂搜尋(custom search)加到自己網站（使用原有的search box和result div）

@ 2012-6-5 08:36 PM

有關如何在自己的網站使用Google 自訂搜尋(custom search)…熊小就不在這裡詳細說明了。（google就有很多）

熊小這次主要想分享一些特定的情況：
1。使用自己的search box ＆
2．搜尋結果放入同一頁的另一div內

申請及設定好自訂搜尋後…按以下的步驟來做：

自己的search box…例如

CODE:
[Copy to clipboard]
<div id="form-search">       
<input type="text" id="q" />
<input type="button" id="btn-seach" value="Search" />
</div>
在它後面加上custom search的api

CODE:
[Copy to clipboard]
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
</script>
style：搜尋elements的外觀風格…ESPRESSO是google提供的其中一個…另外…也可指定css，如：

CODE:
[Copy to clipboard]
style : src="http://yoursite.com/css/cse-espresso.css"
加上event…這裡用以jquery來做示範…

CODE:
[Copy to clipboard]
$('#btn-search').click(function() {
var query = $('#q').val();
var customSearchControl = new google.search.CustomSearchControl('{custom_search_id}');
    var drawOptions = new google.search.DrawOptions();
    customSearchControl.draw(document.getElementById("search-result"), drawOptions);
    customSearchControl.execute(query);
});
custom_search_id：custom search engine unique ID

search-result：這就是你想放搜尋結果的div id

放搜尋結果的div

CODE:
[Copy to clipboard]
<div id="search-result">Loading...</div>
就這樣。
   


  可打印版本 | 推薦給朋友 | 評分