可限制个数的实现代码

暂时没有对手动输入的做判断, 需要的话, 可自行在keyup及change事件中添加相关判断.
相关说明及调用方法,请参见代码中的注释.
演示及代码:

<！doctype html> <html> <head> <meta charset="gbk"> <title>选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think</title> <style> /*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} </style> <meta name="author" content="Mr.Think青鸟" /> <meta name="keywords" content="Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky" /> <meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." /> </head> <body> <label for="tagsbox"><strong>标签：</strong><input type="text" value="点我" class="tagsbox" data-count="10" /></label> <em class="close" title="关闭">关闭</em> <strong>温馨提示：</strong>选择下面的热门标签及使用过的标签,标签将自动排列至表单域。<br/> <strong>热门标签：</strong>时光漫步JavaScriptjQuery Plugin那一年jQuery插件简单星空梦田晴朗mrthink.net<br/> <strong>您使用过的标签：</strong>许巍Sophie Zelmani王菲小娟&山谷里的居民Ke$HaShakira朴树罗大佑<br/> <br style="clear:both" /> <br style="clear:both" /><input value="我是用来测试的" style="width:200px" /> <select> <option>我是用来测试的下拉列表</option> <option>00</option> <option>00</option> <option>00</option> </select><input value="我是用来测试的" style="width:200px" /> <select> <option>我是用来测试的下拉列表</option> <option>one</option> <option>two</option> <option>three</option> </select><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> /******************************* * @author Mr.Think * @author blog http://mrthink.net/ * @2010.11.10 * @可自由转载及使用,但请注明版权归属 *******************************/ //调用bgIframe,解决IE6下遮住下拉列表的问题 //bgIframe函数 Copyright （c） 2006 Brandon Aaron （http://brandonaaron.net） ;（function（$）{ $.fn.bgIframe = $.fn.bgiframe = function（s） { // This is only for IE6 if （ $.browser.msie && /6.0/.test（navigator.userAgent） ） { s = $.extend（{ top : "auto", // auto == .currentStyle.borderTopWidth left : "auto", // auto == .currentStyle.borderLeftWidth width : "auto", // auto == offsetWidth height : "auto", // auto == offsetHeight opacity : true, src : "javascript:false;" }, s || {}）; var prop = function（n）{return n&&n.constructor==Number？n+"px":n;}, html = "<iframe class="bgiframe"frameborder="0"tabindex="-1"src=""+s.src+"""+ "style="display:block;position:absolute;z-index:-1;"+ （s.opacity ！== false？"filter:Alpha（Opacity="0"）;":""）+ "top:"+（s.top=="auto"？"expression（（（parseInt（this.parentNode.currentStyle.borderTopWidth）||0）*-1）+"px"）":prop（s.top））+";"+ "left:"+（s.left=="auto"？"expression（（（parseInt（this.parentNode.currentStyle.borderLeftWidth）||0）*-1）+"px"）":prop（s.left））+";"+ "width:"+（s.width=="auto"？"expression（this.parentNode.offsetWidth+"px"）":prop（s.width））+";"+ "height:"+（s.height=="auto"？"expression（this.parentNode.offsetHeight+"px"）":prop（s.height））+";"+ ""/>"; return this.each（function（） { if （ $（"> iframe.bgiframe", this）.length == 0 ） this.insertBefore（ document.createElement（html）, this.firstChild ）; }）; } return this; }; }）（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）; // if（_inputVal.charAt（0）==","）{ // _inputVal.replace（/,/,""） // } _input.val（_inputVal）; } }）; //关闭按钮 iset.close.click（function（）{ iset.drop.hide（）; }）; } }）; }）（jQuery）; //插件调用 $（function（）{ $（"#demo"）.iSelectTags（）; /* * 还可以传入参数调用 $（"#test"）.iSelectTags（{ name:"#test", drop:$（".drop"）, ... }）; */ }）; </script> </body> </html>

[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/