软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：标签,文本域

<!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,\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>时光漫步JavaScriptjQuery Plugin那一年jQuery插件简单星空梦田晴朗mrthink.net</P> 
<p><strong>您使用过的标签：</strong>许巍Sophie Zelmani王菲小娟&山谷里的居民Ke$HaShakira朴树罗大佑</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/software/news/2020/9m82040.html"  target=_blank > 微信撤回消息为何还要提示对方？腾讯解答真相 </a></td><td><a href="http://www.zhujiangroad.com/mobile/news/2020/4a17447.html"  target=_blank > 微信使用久了占内存？关闭这两个功能，手机马上就变得流畅起来 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/program/android/70654.html"  target=_blank > 安卓清理内存空间 </a></td><td><a href="http://www.zhujiangroad.com/hardware/news/2023/3m87394.html"  target=_blank > 戴尔PC要100％离开中国！完整时间表曝光：真着急 </a></td></tr></table></div> 
</div> 
 
<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> 
</div> 
<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>

技术文章快速查找

浏览器页面区域大小的js获取方法

神奇的7个jQuery 3D插件整理

基于jquery的点击链接插入链接内容的代码

IE8 新增的Javascript 开发接口说明

jQuery 性能优化指南（2）

自己编写的类似JS的trim方法

js判断ie版本号的简单实现代码

多功能jQuery对话框插件jBox 2.3正式版下载

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建