利用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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
js读取cookie方法总结
Oct 31 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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 用sock技术发送邮件的函数
2007/07/21 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
javascript定时器完整实例
2015/02/10 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
轮播图组件js代码
2016/08/08 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
基于python实现微信模板消息
2015/12/21 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
django 取消csrf限制的实例
2020/03/13 Python
学习Python需要哪些工具
2020/09/04 Python
python 实现超级玛丽游戏
2020/11/25 Python
消防应急演练方案
2014/02/12 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
初中语文教学反思范文
2016/03/03 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android