有關如何在自己的網站使用Google 自訂搜尋(custom search)…熊小就不在這裡詳細說明了。(google就有很多)
熊小這次主要想分享一些特定的情況:
1。使用自己的search box &
2.搜尋結果放入同一頁的另一div內
申請及設定好自訂搜尋後…按以下的步驟來做:
自己的search box…例如
<div id="form-search">
<input type="text" id="q" />
<input type="button" id="btn-seach" value="Search" />
</div> 在它後面加上custom search的api
<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,如:
style : src="http://yoursite.com/css/cse-espresso.css" 加上event…這裡用以jquery來做示範…
$('#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
<div id="search-result">Loading...</div> 就這樣。
|