利用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函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
详解Vue This$Store总结
Dec 17 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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函数学习之PHP函数点评
2012/07/05 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python Numpy库常见用法入门教程
2020/01/16 Python
python判断链表是否有环的实例代码
2020/01/31 Python
如何用python批量调整视频声音
2020/12/22 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
抵押贷款承诺书
2014/05/30 职场文书
教室布置标语
2014/06/26 职场文书
初中数学教学随笔
2015/08/15 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Python中json.dumps()函数的使用解析
2021/05/17 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android