查看積分策略說明發表回覆
Discuz! 代碼
提示插入
直接插入
說明訊息

插入粗體文本 插入斜體文本 插入下劃線 置中對齊 插入超級連結 插入信件位址 插入圖像 插入 flash 插入代碼 插入引言 插入列表
刪除線 直線分隔線 虛線分隔線
    
添加文字底框
內容 [字數檢查]:

表情符號

更多 Smilies
字型大小 |||
溫馨提示:本區開放遊客瀏覽。


文章關鍵字 : [功能說明]
(關鍵字可加強搜索準確性, 如關鍵字多於一組, 請以 , 作分隔, e.g. : 阿笨,shiuh,第一笨)

 關閉 URL 識別 | html 禁用
 關閉 表情符號 | 表情符號 可用
 關閉 Discuz! 代碼 | Discuz! 代碼 可用
使用個人簽名
接收新回覆信件通知
推薦放檔網絡空間

檔案(Torent, zip等)
  1. freedl
  2. multiupload
  3. btghost
  4. 便當狗
  5. mediafire
  6. pillowangel
圖片(JPG, GIF等)
  1. hotimg
  2. tinypic
  3. mousems2
  4. imageshack
  5. imm.io
>>>歡迎推薦好用空間


最新10篇文章回顧
Vic

 發表於 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>
就這樣。





所在時區為 GMT+8, 現在時間是 2024-5-4 03:52 PM
清除 Cookies - 連絡我們 - TWed2k © 2001-2046 - 純文字版 - 說明
Discuz! 0.1 | Processed in 0.018841 second(s), 6 queries , Qzip disabled