利用JQuery為搜索欄增加tag提示
實(shí)現(xiàn)的方法很簡(jiǎn)單,首先是要在你的網(wǎng)站上加載JQuery,然后再加載下面的JS文件,下載之
(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&¤tTags[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);
接著就是編輯你自己的關(guān)鍵字。這里的做法是你自己自行編輯,還有很多方法是直接查詢WordPress的數(shù)據(jù)庫的。但那樣做就顯得很專業(yè)的樣子。對(duì)于我自己來說,本來站內(nèi)的搜索功能就不是很受用,為了那沒多被使用過幾次的搜索而復(fù)雜這個(gè)提示功能顯然不值,所以還是自己來編輯一些重要的關(guān)鍵字好了。下面的代碼也要整合到網(wǎng)站的JS文件中:
<script type="text/javascript">
$(document).ready(function() {
$('#tags').tagSuggest({
tags: ["WordPress","WordPress 主題","WordPress 插件","生活","巴黎","設(shè)計(jì)","法國(guó)","照片","朋友","技巧","下載","JQuery","JQuery 教程","JQuery 例子","twitter","Google","seo","firefox","firefox 擴(kuò)展","css","ajax","theme","theme 教程","theme 技巧","Js-O3","Js-Paper","blackberry","blackberry 8900"]
});
});
</script>
能看出上面的關(guān)鍵字編輯了吧。
然后最后一步就是需要指定相應(yīng)的搜索欄,如上面代碼中的"#tags"就是決定這個(gè)東西。修改搜索欄的ID,讓其適應(yīng)則可。也就是說為搜索欄的input內(nèi)添加一個(gè)id="tags"則可?;蛘吣阋部梢孕薷纳厦娴拇a內(nèi)的ID,讓其適應(yīng)你原有的搜索欄內(nèi)input的ID。
當(dāng)然還有對(duì)關(guān)鍵字的樣式設(shè)定,這個(gè)就隨大家愛好了,我這里不列出。
tag.js 打包下載
相關(guān)文章
20個(gè)非常棒的Jquery實(shí)用工具 國(guó)外文章
網(wǎng)站設(shè)計(jì)者往往會(huì)設(shè)計(jì)一些小的工具類(widgets)或者一些可復(fù)用的程序,從而使頁面更楚楚動(dòng)人,更吸引瀏覽者駐足。這里收集了20個(gè)常用Jquery工具類,這些小的工具可以幫助網(wǎng)站設(shè)計(jì)人員和站長(zhǎng)非常容易地創(chuàng)建漂亮的站點(diǎn)。2010-01-01基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼
qq空間的一份虛擬禮物可能會(huì)讓很久不曾相見的朋友拉近一些距離。那么基于jquery代碼是如何實(shí)現(xiàn)此功能的呢?下面腳本之家小編給大家分享基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼,一起看看吧2016-05-05jquery easyui combox一些實(shí)用的小方法
這篇文章主要介紹了jquery easyui combox一些實(shí)用的小方法,有需要的朋友可以參考一下2013-12-12jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV功能
這篇文章主要介紹了jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV的相關(guān)資料,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11Jquery對(duì)象和Dom對(duì)象的區(qū)別分析
最近有小伙伴咨詢Jquery對(duì)象和Dom對(duì)象的區(qū)別,今天我們談?wù)剛€(gè)人對(duì)于Jquery對(duì)象和Dom對(duì)象的區(qū)別的理解,如有遺漏或者錯(cuò)誤還請(qǐng)指出。2014-11-11輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
輕松學(xué)習(xí)jQuery插件EasyUI,本文的重點(diǎn)在于EasyUI表單驗(yàn)證,并告訴大家如何提交表單,感興趣的小伙伴們可以參考一下2015-12-12jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法
jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法,需要的朋友可以參考下。2010-12-12老生常談jquery中detach()和remove()的區(qū)別
下面小編就為大家?guī)硪黄仙U刯query中detach()和remove()的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03jquery綁定事件 bind和on的用法與區(qū)別分析
這篇文章主要介紹了jquery綁定事件 bind和on的用法與區(qū)別,結(jié)合實(shí)例形式分析了jquery綁定事件 bind和on的基本功能、用法、區(qū)別與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05