Add a tag prompt for the search bar using JQuery

A simple function is to use JQuery to display preset keywords when users enter search characters in the search bar. In addition to surprising users, it also simplifies the input. For example:

The implementation method is very simple. First, you need to load JQuery on your website, then load the following JS file and download it.
Copy codeThe Code is 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', 'tagrap ': '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, 'ype ype ': '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 | returns get. innerHTML );}}). addClass (settings. matchClass); setSelection () ;};}) (jQuery );

Then, edit your own keywords. The method here is edited by yourself. There are many ways to directly query the WordPress database. But it looks very professional. For myself, the search function in the station is not very useful, so it is obviously not worth the complicated prompt function to be used for a few searches, so let's edit some important keywords on our own. The following code should also be integrated into the JS file of the website:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# Tags'). tagSuggest ({
Tags: ["WordPress", "WordPress theme", "WordPress plugin", "life", "Paris", "design", "France", "photo ", "Friend", "tip", "Download", "JQuery", "JQuery tutorial", "JQuery example", "twitter", "Google", "seo ", "firefox", "firefox extensions", "css", "ajax", "theme", "theme tutorial", "theme Tips", "Js-O3 ", "Js-Paper", "blackberry", "blackberry 8900"]
});
});
</Script>

You can see that the above keyword is edited.
The last step is to specify the corresponding search bar. For example, "# tags" in the above Code determines this. Modify the ID of the search bar so that it can be adapted. That is to say, you can add an id = "tags" to the input in the search bar. Alternatively, you can modify the ID in the above Code to adapt it to the input ID in your original search bar.
Of course, there are also style settings for keywords. This will be your hobby. I will not list them here.
Package and download tag. js