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

暂时没有对手动输入的做判断, 需要的话, 可自行在keyup及change事件中添加相关判断.
相关说明及调用方法,请参见代码中的注释.
演示及代码:
</p><p><b><br /><b> </p><p><title>选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think</title> </p><p>/*reset css*/<br />body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,5b8b4f53}<br />div,h2,p,input,select{margin:0;padding:0}<br />input{vertical-align:middle}<br />h1{font-size:1em;font-weight:normal}<br />h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none}<br />h1 a:hover{background:#a40000;color:#fff;text-decoration:underline}<br />h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative}<br />/*demo css*/<br />#demo input{_margin-top:1px;padding-left:5px;border:1px solid #999;width:700px;height:20px;font-size:14px;color:#000}<br />#dropbox{display:none;z-index:9999;padding:5px;background:#fff;border:1px solid #999;border-top:0;z-index:999}<br />#dropbox a{margin-right:8px;text-decoration:none}<br />#dropbox a:hover{text-decoration:underline}<br />#dropbox p{line-height:24px}<br />#dropbox em.close{float:right;color:#999;font-style:normal;cursor:pointer} </p><p></b> </p><p><label for="tagsbox"><strong>标签：</strong></label> </p><p><em class="close" title="关闭">关闭</em> </p><p><strong>温馨提示：</strong>选择下面的热门标签及使用过的标签,标签将自动排列至表单域。</p><p><strong>热门标签：</strong>时光漫步JavaScriptjQuery Plugin那一年jQuery插件简单星空梦田晴朗mrthink.net</p><p><strong>您使用过的标签：</strong>许巍Sophie Zelmani王菲小娟&山谷里的居民Ke$HaShakira朴树罗大佑</p><p><br style="clear:both" /><br /><br style="clear:both" /> </p><p>我是用来测试的下拉列表<br />00<br />00<br />00 </p><p>我是用来测试的下拉列表<br />one<br />two<br />three </p><p></b> </p><p>
[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’));