本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限製到您的網站並自定義顯示以匹配您的網站的美學。
以下是這樣做的方法:
>> javaScript代碼:
google.load("search", "1", {"language" : "en"}); function initialize() { var searchControl = new google.search.SearchControl(); // Site-restricted web search var siteSearch = new google.search.WebSearch(); siteSearch.setUserDefinedLabel("jquery4u.com"); // Replace with your domain siteSearch.setUserDefinedClassSuffix("siteSearch"); siteSearch.setSiteRestriction("jquery4u.com"); // Replace with your domain searchControl.addSearcher(siteSearch); // Add other search types (Web, News, Blog, Image, Book, Video) searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.NewsSearch()); searchControl.addSearcher(new google.search.BlogSearch()); searchControl.addSearcher(new google.search.ImageSearch()); searchControl.addSearcher(new google.search.BookSearch()); searchControl.addSearcher(new google.search.VideoSearch()); // Optional: LocalSearch, PatentSearch // Tabbed display var drawOptions = new google.search.DrawOptions(); drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); searchControl.draw(document.getElementById("searchcontrol"), drawOptions); } google.setOnLoadCallback(initialize);
html代碼:
<div id="searchcontrol"></div>> css代碼:
請記住將
替換為您的實際域名。 改進的CSS還擴大了搜索輸入框,以便於鍵入。#searchcontrol, .gsc-control, .gsc-results { width: 600px; } .gsc-input { width: 200px; } /* Increased input width for better usability */ .gsc-branding { display: none; } /* Hide "powered by Google" */ .gs-title a { color: orange; font-weight: bold; } #searchcontrol a { color: orange; }
google搜索API AJAX FAQ:"jquery4u.com"
>
>
以上是自定義Google搜索API設置教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!