很简单的一个功能，就是当用户在搜索栏输入搜索字符时候，利用jquery的功能把一些预设好的关键字浮现出来，除了让用户意外一下，还有就是让用户简化输入。比如象下图的样子：
实现的方法很简单，首先是要在你的网站上加载jquery，然后再加载下面的js文件，下载之
复制代码 代码如下:
(function($){var globaltags=[];window.setglobaltags=function(tags){globaltags=gettags(tags);};function gettags(tags){var tag,i,goodtags=[];for(i=0;igoodtags.push(tag.tolowercase());}
return goodtags;}
$.fn.tagsuggest=function(options){var defaults={'matchclass':'tagmatches','tagcontainer':'span','tagwrap':'span','sort':true,'tags':null,'url':null,'delay':0,'separator':' '};var i,tag,usertags=[],settings=$.extend({},defaults,options);if(settings.tags){usertags=gettags(settings.tags);}else{usertags=globaltags;}
return this.each(function(){var tagselm=$(this);var elm=this;var matches,fromtab=false;var suggestionsshow=false;var workingtags=[];var currenttag={position:0,tag:};var tagmatches=document.createelement(settings.tagcontainer);function showsuggestionsdelayed(el,key){if(settings.delay){if(elm.timer)cleartimeout(elm.timer);elm.timer=settimeout(function(){showsuggestions(el,key);},settings.delay);}else{showsuggestions(el,key);}}
function showsuggestions(el,key){workingtags=el.value.split(settings.separator);matches=[];var i,html='',chosentags={},tagselected=false;currenttag={position:currenttags.length-1,tag:''};for(i=0;ichosentags[currenttags[i].tolowercase()]=true;}
if(currenttag.tag){if(settings.url){$.ajax({'url':settings.url,'datatype':'json','data':{'tag':currenttag.tag},'async':false,'success':function(m){matches=m;}});}else{for(i=0;imatches=$.grep(matches,function(v,i){return!chosentags[v.tolowercase()];});if(settings.sort){matches=matches.sort();}
for(i=0;i'+matches[i]+''+settings.tagwrap+'>';}
tagmatches.html(html);suggestionsshow=!!(matches.length);}else{hidesuggestions();}}
function hidesuggestions(){tagmatches.empty();matches=[];suggestionsshow=false;}
function setselection(){var v=tagselm.val();if(v==tagselm.attr('title')&&tagselm.is('.hint'))v='';currenttags=v.split(settings.separator);hidesuggestions();}
function choosetag(tag){var i,index;for(i=0;iif(index==workingtags.length-1)tag=tag+settings.separator;workingtags[i]=tag;tagselm.val(workingtags.join(settings.separator));tagselm.blur().focus();setselection();}
function handlekeys(ev){fromtab=false;var type=ev.type;var resetselection=false;switch(ev.keycode){case 37:case 38:case 39:case 40:{hidesuggestions();return true;}
case 224:case 17:case 16:case 18:{return true;}
case 8:{if(this.value==''){hidesuggestions();setselection();return true;}else{type='keyup';resetselection=true;showsuggestionsdelayed(this);}
break;}
case 9:case 13:{if(suggestionsshow){choosetag(matches[0]);fromtab=true;return false;}else{return true;}}
case 27:{hidesuggestions();setselection();return true;}
case 32:{setselection();return true;}}
if(type=='keyup'){switch(ev.charcode){case 9:case 13:{return true;}}
if(resetselection){setselection();}
showsuggestionsdelayed(this,ev.charcode);}}
tagselm.after(tagmatches).keypress(handlekeys).keyup(handlekeys).blur(function(){if(fromtab==true||suggestionsshow){fromtab=false;tagselm.focus();}});tagmatches=$(tagmatches).click(function(ev){if(ev.target.nodename==settings.tagwrap.touppercase()&&$(ev.target).is('._tag_suggestion')){choosetag(ev.target.innerhtml);}}).addclass(settings.matchclass);setselection();});};})(jquery);
接着就是编辑你自己的关键字。这里的做法是你自己自行编辑，还有很多方法是直接查询wordpress的数据库的。但那样做就显得很专业的样子。对于我自己来说，本来站内的搜索功能就不是很受用，为了那没多被使用过几次的搜索而复杂这个提示功能显然不值，所以还是自己来编辑一些重要的关键字好了。下面的代码也要整合到网站的js文件中：
复制代码 代码如下:
能看出上面的关键字编辑了吧。
然后最后一步就是需要指定相应的搜索栏，如上面代码中的#tags就是决定这个东西。修改搜索栏的id，让其适应则可。也就是说为搜索栏的input内添加一个id=tags则可。或者你也可以修改上面的代码内的id，让其适应你原有的搜索栏内input的id。
当然还有对关键字的样式设定，这个就随大家爱好了，我这里不列出。
tag.js 打包下载