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

　　;(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);