RSS   



  可打印版本 | 推薦給朋友 | 訂閱主題 | 收藏主題 | 純文字版  


 


 
主題: [其他] 將Google 自訂搜尋(custom search)加到自己網站(使用原有的search box和result div)   字型大小:||| 
  本主題被作者加入到他/她的 Blog 中  
Vic
開墾隊隊長.苦力
等級: 32等級: 32等級: 32等級: 32等級: 32等級: 32等級: 32等級: 32
老得不能再稱小的熊

十週年紀念徽章(五級)   終生苦力熊勳章  

今日心情

 . 積分: 9409
 . 精華: 28
 . 文章: 9949
 . 收花: 79211 支
 . 送花: 10986 支
 . 比例: 0.14
 . 在線: 2902 小時
 . 瀏覽: 187021 頁
 . 註冊: 7982
 . 失蹤: 87
 . 大熊國
#1 : 2012-6-5 08:36 PM     只看本作者 引言回覆

有關如何在自己的網站使用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>
就這樣。


相關關鍵字: google自訂搜尋  google custom search  






[如果你喜歡本文章,就按本文章之鮮花~送花給作者吧,你的支持就是別人的動力來源]
本文連接  
檢閱個人資料  訪問主頁  發私人訊息  Blog  快速回覆 新增/修改 爬文標記

   

快速回覆
表情符號

更多 Smilies

字型大小 : |||      [完成後可按 Ctrl+Enter 發佈]        

溫馨提示:本區開放遊客瀏覽。
選項:
關閉 URL 識別    關閉 表情符號    關閉 Discuz! 代碼    使用個人簽名    接收新回覆信件通知
發表時自動複製內容   [立即複製] (IE only)


 



所在時區為 GMT+8, 現在時間是 2024-3-29 05:55 AM
清除 Cookies - 連絡我們 - TWed2k © 2001-2046 - 純文字版 - 說明
Discuz! 0.1 | Processed in 0.024004 second(s), 6 queries , Qzip disabled