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

暂时没有对手动输入的做判断, 需要的话, 可自行在keyup及change事件中添加相关判断.
相关说明及调用方法,请参见代码中的注释.
演示及代码:
<!doctype html><html><head><link rel="dns-prefetch" href="//www.jiangweishan.com"><link rel="dns-prefetch" href="//www.jiangweishan.comsearch.php"><link rel="dns-prefetch" href="//shang.qq.com"><link rel="dns-prefetch" href="//ajax.googleapis.com"><link rel="dns-prefetch" href="//mrthink.net"><link rel="dns-prefetch" href="//brandonaaron.net"><link rel="dns-prefetch" href="//www.jb51.net"><link rel="dns-prefetch" href="//files.jb51.net"><link rel="dns-prefetch" href="//www.mockplus.cn"><link rel="dns-prefetch" href="//www.aliyun.com"><link rel="dns-prefetch" href="//pagead2.googlesyndication.com"><link rel="dns-prefetch" href="//weibo.com"><link rel="dns-prefetch" href="//beian.miit.gov.cn"><link rel="dns-prefetch" href="//hm.baidu.com"><link rel="dns-prefetch" href="//www.zblogcn.com"><meta charset="gbk"><title>选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think</title><style> /*reset css*/ body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53} 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><div id="demo"><label for="tagsbox"><strong>标签：</strong><input type="text" value="点我" class="tagsbox" data-count="10"></label><div id="dropbox"><em class="close" title="关闭">关闭</em><p><strong>温馨提示：</strong>选择下面的热门标签及使用过的标签,标签将自动排列至表单域。</p><p><strong>热门标签：</strong><a href="javascript:void(0)">时光漫步</a><a href="javascript:void(0)">JavaScript</a><a href="javascript:void(0)">jQuery Plugin</a><a href="javascript:void(0)">那一年</a><a href="javascript:void(0)">jQuery插件</a><a href="javascript:void(0)">简单</a><a href="javascript:void(0)">星空</a><a href="javascript:void(0)">梦田</a><a href="javascript:void(0)">晴朗</a><a href="javascript:void(0)">mrthink.net</a></p><p><strong>您使用过的标签：</strong><a href="javascript:void(0)">许巍</a><a href="javascript:void(0)">Sophie Zelmani</a><a href="javascript:void(0)">王菲</a><a href="javascript:void(0)">小娟&山谷里的居民</a><a href="javascript:void(0)">Ke$Ha</a><a href="javascript:void(0)">Shakira</a><a href="javascript:void(0)">朴树</a><a href="javascript:void(0)">罗大佑</a></p></div><br style="clear:both"><br style="clear:both"><input value="我是用来测试的" style="width:200px"><select><option>我是用来测试的下拉列表 <option>00 <option>00 <option>00 </select></div><input value="我是用来测试的" style="width:200px"><select><option>我是用来测试的下拉列表 <option>one <option>two <option>three </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/