利用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嵌套函数及闭包
Nov 09 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
npm 语义版本控制详解
Sep 10 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python实现简单的语音识别系统
2017/12/13 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python实现最短路径的实例方法
2020/07/19 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
高中生物教学反思
2014/02/05 职场文书
走群众路线剖析材料
2014/10/09 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
办公室个人总结
2015/02/28 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
收入证明申请书
2015/06/12 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android