摇滚21 选择标签至文本域效果,可多选/可过滤重复/可限制个数(已封装)

js效果：http://www.oschina.net/code/snippet_129267_3649(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=$.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还是idif(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);