Use jquery to add tag hints to the search bar _jquery

A simple feature is that when users enter search characters in the search field, they use JQueryThe function of some preset good keywords emerge, in addition to let the user accidentally, there is to allow users to simplify the input. Like the image below:

The implementation of the method is very simple, first of all, to load jquery on your site, and then load the following JS file, download the

Copy Code code as follows:

(function ($) {var globaltags=[];window.setglobaltags=function (tags) {globaltags=gettags (tags); function GetTags (tags) {var tag,i,goodtags=[];for (i=0;i<tags.length;i++) {tag=tags[i];if (typeof tags[i]== ') Object ') {Tag=tags[i].tag;}
Goodtags.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;i< currenttags.length&&i<workingtags.length;i++) {if (!tagselected&&currenttags[i].tolowercase () !=workingtags[i].tolowercase ()) {currenttag={position:i,tag:workingtags[i].tolowercase ()};tagSelected=true;}
Chosentags[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;i<usertags.length;i++) {if (Usertags[i].indexof (Currenttag.tag) ===0) {Matches.push (userTags[i]);}}}
Matches=$.grep (Matches,function (v,i) {return!chosentags[v.tolowercase ()];}); if (settings.sort) {matches=matches.sort ();}
for (i=0;i<matches.length;i++) {html+= ' < ' +settings.tagwrap+ ' class= ' _tag_suggestion ' > ' +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;i<currenttags.length;i++) {if (Currenttags[i].tolowercase ()!= Workingtags[i].tolowercase ()) {index=i;break;}}
if (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);

And then you edit your own keywords. Here is the practice of your own editing, there are many ways to directly query the WordPress database. But that would be a professional look. For myself, the site's search function is not very useful, in order to have not been used several times the search and complexity of this hint function is obviously not worth, so or own to edit some important keywords good. The following code is also to be integrated into the site's JS file:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #tags '). Tagsuggest ({
Tags: ["wordpress", "WordPress theme", "WordPress plugin", "Life", "Paris", "Design", "France", "photos", "Friends", "Tips", "Download", "jquery", "jquery Tutorial", " JQuery example, "Twitter", "Google", "seo", "Firefox", "Firefox Extensions", "CSS", "Ajax", "theme", "Theme Tutorials", "Theme Tips", "Js-o3", " Js-paper "," BlackBerry "," BlackBerry 8900 "]
});
});
</script>

Can see the above key word editor.
Then the final step is to specify the appropriate search bar, as in the above code "#tags" is to decide this thing. Modify the ID of the search bar to accommodate it. That is to say, add a id= "tags" to the input of the search bar. Or you can modify the ID in the above code to fit the ID of the input in your original search field.
Of course, there is the style of the keyword set, this is the hobby, I do not list here.
Tag.js Package Download