本教程向您展示了如何将自定义的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还扩大了搜索输入框,以便于键入。#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中文网其他相关文章!