api.ajax和ajax
Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API. Let me show you how to implement this awesome API within your own website!
老实说... WordPress的搜索功能不是很好。 坦白讲，没有比Google更好的搜索功能了。 对我们来说幸运的是，Google提供了一种很棒的方法，我们可以使用它们对自己的网站进行搜索：Google AJAX搜索API。 让我向您展示如何在自己的网站中实现这个超赞的API！
注册！ (Sign Up!)
Google's AJAX Search API requires that you . Signing up is free and you'll be done with the process of retrieving a key in a few minutes.
Google的AJAX搜索API要求您 。 免费注册，几分钟之内即可完成密钥检索的过程。
You'll also need to provide a domain for which they key will work for; one key per domain.
您还需要提供一个其密钥适用的域； 每个域一个密钥。
HTML (The HTML)
You'll want to use a "real" form so that if the user doesn't have JavaScript, they'll get directed to Google for their search. Beyond that, follow the hidden input line to ensure your search will work. You may also note that the search box has autocomplete and placeholder attributes -- those are HTML5 functionality, nothing to do with Google's AJAX Search API.
您将要使用“真实”形式，以便如果用户没有JavaScript，他们将被定向到Google进行搜索。 除此之外，请按照隐藏的输入行进行操作，以确保搜索有效。 您可能还注意到，搜索框具有自动完成和占位符属性-它们是HTML5功能，与Google的AJAX搜索API无关。
CSS (The CSS)
/* results positioning */#search-results { position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }/* triangle! */#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }/* content DIV which holds search results! */#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) } The CSS above simply position the elements where I want them per my design. I even used a CSS triangle!
上面CSS只是根据设计将元素放置在需要的位置。 我什至使用了CSS三角形！
JavaScript (The JavaScript)
window.addEvent('domready',function(){ /* search */ var searchBox = $('search-box'), searchLoaded=false, searchFn = function() { /* We're lazyloading all of the search stuff. After all, why create elements, add listeners, etc. if the user never gets there? */ if(!searchLoaded) { searchLoaded = true; //set searchLoaded to "true"; no more loading! //build elements! var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after'); var wrapper = new Element('div',{ styles: { position: 'relative' } }).inject(container); new Element('div',{ id: 'search-results-pointer' }).inject(wrapper); var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper); var closer = new Element('a', { href: 'javascript:;', text: 'Close', styles: { position: 'absolute', //position the "Close" link bottom: 35, right: 20 }, events: { click: function() { container.fade(0); } } }).inject(wrapper); //google interaction var search = new google.search.WebSearch(), control = new google.search.SearchControl(), options = new google.search.DrawOptions(); //set google options options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); options.setInput(searchBox); //set search options search.setUserDefinedClassSuffix('siteSearch'); search.setSiteRestriction('davidwalsh.name'); search.setLinkTarget(google.search.Search.LINK_TARGET_SELF); //set search controls control.addSearcher(search); control.draw(contentContainer,options); control.setNoResultsString('No results were found.'); //add listeners to search box searchBox.addEvents({ keyup: function(e) { if(searchBox.value && searchBox.value != searchBox.get('placeholder')) { container.fade(0.9); control.execute(searchBox.value); } else { container.fade(0); } } }); searchBox.removeEvent('focus',searchFn); } }; searchBox.addEvent('focus',searchFn);}); There's a fair amount of JavaScript above so stay with me. The following are the steps for implementing the Google AJAX API:
上面有很多JavaScript，请和我在一起。 以下是实现Google AJAX API的步骤：
- Create an element to house the results of the search. 创建一个元素来容纳搜索结果。
- Create a "Close" link which will allow the user to close the search results window. 创建一个“关闭”链接，该链接将允许用户关闭搜索结果窗口。
Create our Google-given class instance:
创建我们的Google提供的类实例：
- . I've chosen to add tabs and set the input as my search box. 。 我选择添加选项卡并将输入设置为我的搜索框。
- . "siteSearch" is my suffix for results, I've restricted my search to the davidwalsh.name domain, and form submission will trigger results to display in the current window (instead of a new window). 。 “ siteSearch”是结果的后缀，我将搜索限制在davidwalsh.name域，并且表单提交将触发结果显示在当前窗口(而不是新窗口)中。
- . With my DrawOptions instance, I've set search control, set the draw container with the options we've created, and I've decided to use Google's default "no results" message 。 在我的DrawOptions实例中，我设置了搜索控件，使用我们创建的选项设置了绘图容器，并且决定使用Google的默认“无结果”消息
Once the search controls are created, it's time to attach events to the search box to show and hide the search results container based on the contents of the search box. That's all!
创建搜索控件后，就该将事件附加到搜索框，以根据搜索框的内容显示和隐藏搜索结果容器。 就这样！
As you can see, I've chosen to use the MooTools (FTW) JavaScript toolkit to create the element that houses the results, the "Close" link, and to bind events to the search box. You could just as easily use Dojo or jQuery for element creation and even handling.
如您所见，我选择使用MooTools(FTW)JavaScript工具包来创建用于存储结果的元素，“关闭”链接，并将事件绑定到搜索框。 您可以轻松地使用Dojo或jQuery进行元素创建甚至处理。
In all honesty, I couldn't believe how easy it was to implement Google AJAX search. It's an easy want to implement search on your website, especially if you're currently using WordPress' search. I recommend taking the time to implement Google's AJAX Search API -- the day it takes you to get it working will save your users hours of pain!
老实说，我不敢相信实现Google AJAX搜索是多么容易。 在您的网站上实施搜索很容易，尤其是如果您当前正在使用WordPress的搜索。 我建议您花一些时间来实施Google的AJAX搜索API-花费一天的时间即可使其工作，省时省力！
翻译自:
api.ajax和ajax