基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码_jquery
程序员文章站
2022-05-02 08:39:21
...
暂时没有对手动输入的做判断, 需要的话, 可自行在keyup及change事件中添加相关判断.
相关说明及调用方法,请参见代码中的注释.
演示及代码:
[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/
相关说明及调用方法,请参见代码中的注释.
演示及代码:
[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/