利用JQuery为搜索栏增加tag提示


Posted in Javascript onJune 22, 2009

很简单的一个功能,就是当用户在搜索栏输入搜索字符时候,利用JQuery的功能把一些预设好的关键字浮现出来,除了让用户意外一下,还有就是让用户简化输入。比如象下图的样子:

利用JQuery为搜索栏增加tag提示

实现的方法很简单,首先是要在你的网站上加载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);

接着就是编辑你自己的关键字。这里的做法是你自己自行编辑,还有很多方法是直接查询WordPress的数据库的。但那样做就显得很专业的样子。对于我自己来说,本来站内的搜索功能就不是很受用,为了那没多被使用过几次的搜索而复杂这个提示功能显然不值,所以还是自己来编辑一些重要的关键字好了。下面的代码也要整合到网站的JS文件中:
<script type="text/javascript"> 
$(document).ready(function() { 
$('#tags').tagSuggest({ 
tags: ["WordPress","WordPress 主题","WordPress 插件","生活","巴黎","设计","法国","照片","朋友","技巧","下载","JQuery","JQuery 教程","JQuery 例子","twitter","Google","seo","firefox","firefox 扩展","css","ajax","theme","theme 教程","theme 技巧","Js-O3","Js-Paper","blackberry","blackberry 8900"] 
}); 
}); 
</script>

能看出上面的关键字编辑了吧。
然后最后一步就是需要指定相应的搜索栏,如上面代码中的"#tags"就是决定这个东西。修改搜索栏的ID,让其适应则可。也就是说为搜索栏的input内添加一个id="tags"则可。或者你也可以修改上面的代码内的ID,让其适应你原有的搜索栏内input的ID。
当然还有对关键字的样式设定,这个就随大家爱好了,我这里不列出。
tag.js 打包下载
Javascript 相关文章推荐
JavaScript去掉数组中的重复元素
Jan 13 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
web 页面分页打印的实现
Jun 22 #Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 #Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 #Javascript
js 单引号 传递方法
Jun 22 #Javascript
使弱类型的语言JavaScript变强势
Jun 22 #Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 #Javascript
PNG背景在不同浏览器下的应用
Jun 22 #Javascript
You might like
PHP Mysql编程之高级技巧
2008/08/27 PHP
php开发文档 会员收费1期
2012/08/14 PHP
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
python中使用print输出中文的方法
2018/07/16 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
你懂得怎么写自荐信吗?
2013/12/27 职场文书
影视广告专业求职信
2014/09/02 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
个人工作保证书
2015/02/28 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python