暂时没有对手动输入的做判断, 需要的话, 可自行在keyup及change事件中添加相关判断. 相关说明及调用方法,请参见代码中的注释. 演示及代码: 选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think /*reset css*/ body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,5b8b4f53} div,h2,p,input,select{margin:0;padding:0} input{vertical-align:middle} h1{font-size:1em;font-weight:normal} h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} /*demo css*/ #demo input{_margin-top:1px;padding-left:5px;border:1px solid #999;width:700px;height:20px;font-size:14px;color:#000} #dropbox{display:none;z-index:9999;padding:5px;background:#fff;border:1px solid #999;border-top:0;z-index:999} #dropbox a{margin-right:8px;text-decoration:none} #dropbox a:hover{text-decoration:underline} #dropbox p{line-height:24px} #dropbox em.close{float:right;color:#999;font-style:normal;cursor:pointer} 标签： 关闭 温馨提示：选择下面的热门标签及使用过的标签,标签将自动排列至表单域。 热门标签：时光漫步JavaScriptjQuery Plugin那一年jQuery插件简单星空梦田晴朗mrthink.net 您使用过的标签：许巍Sophie Zelmani王菲小娟&山谷里的居民Ke$HaShakira朴树罗大佑 我是用来测试的下拉列表 00 00 00 我是用来测试的下拉列表 one two three [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]复制代码 代码如下: ;(function(){ $.fn.extend({ iSelectTags:function(options){ var iset={ name:'.tagsbox',//表单或class或id名 drop:$('#dropbox'),//弹出框定位 pseudoClass:$('#dropbox>p>a'),//可选择的标签定位 close:$('em.close'),//关闭按钮定位 separator:',',//标签间分隔符,建议使用英文逗号 maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值 } options = options || {}; $.extend(iset, options); var _input=$(iset.name); var _inputVal=_input.val(); var _arr=new Array(); //存放标签的数组 var _left=_input.offset().left; //左绝对距离 var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度 var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight')); iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'}); //弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义. var _txt=null; var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数 if(isNaN(_maxCount)){ _maxCount=iset.maxCount } _input.click(function(){ iset.drop.show(); iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题 }).bind('keyup change',function(){ //可以在此处扩展手动输入标签情况下的相关判断 //if语句可避免清空重新选择时第一个字符为逗号 if ($(this).val() == '') { _arr = new Array(); }else { _arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值 } }); $(document).click(function(e){ //点击非弹出框区域时关闭弹出框 //下面的 if语句是用来判断传入的是class还是id if(iset.name.charAt(0)=='#'){ if(e.target.id!=iset.name.substring(1)){ iset.drop.hide(); } }else if(iset.name.charAt(0)=='.'){ if(e.target.className!=iset.name.substring(1)){ iset.drop.hide(); } } }); iset.drop.click(function(e){ //阻止弹出框区域默认事件 e.stopPropagation(); }); iset.pseudoClass.click(function(){ //标签选择 _txt=$(this).text(); //下面的$.inArray是用来判断是否重复 //若想反馈重复提示或走出限制个数提示,可改进下面的if语句 if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){ _arr.push(_txt); _inputVal=_arr.join(iset.separator); _input.val(_inputVal); } }); //关闭按钮 iset.close.click(function(){ iset.drop.hide(); }); } }); })(jQuery); 原文发布于Mr.Think的博客:http://mrthink.net/jquery-plugin-iselecttags/

　　推荐阅读

　　cnblogs中在闪存中屏蔽某人的实现代码

复制代码 代码如下: var unlikes = ['zhang523012313', 'yangtongnet']; function delUnlike(filter, expr) { $(filter).filter(function() { var href = $(this).find(expr).attr('href'); for (var i = 0; i < u>>>详细阅读

本文标题：基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码

地址：http://www.17bianji.com/kaifa2/JS/25410.html

 1/2    1