jQuery TagsInput

布满荆棘的人生 2022-06-14 03:15 207阅读 0赞

# [jQuery TagsInput Plugin（添加/删除标签插件）][jQuery TagsInput Plugin] #

看名字应该知道是干嘛用了吧。

一个jquery开发的标签功能加强插件，可以生成或删除标签，还能对输入重复标签进行检查，和JQueryautocomplete插件配合实现自动完成功能。

官网：[http://xoxco.com/projects/code/tagsinput/][http_xoxco.com_projects_code_tagsinput]

截图：![jQuery <wbr>Tags <wbr>Input <wbr>Plugin（添加/删除标签插件）][jQuery_wbr_Tags_wbr_Input_wbr_Plugin]

(下面是翻译了官网上的用法，英文不是很好，有能力的尽量看官网吧)

首先，引用下面两个文件

<</span>script src="jquery.tagsinput.js"></</span>script> <</span>link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

在你的表单里创建一个包含tags列表的input输入框，你可以在value里设置默认或目前有的tags，并用逗号隔开。

<</span>input name="tags" id="tags" value="foo,bar,baz" />

然后，简单地给任何一个输入标签调用tagsInput()函数，它便会被当作一个tags列表处理

$('#tags').tagsInput();

如果你想使用jQuery.autocomalete（自动完成插件）配合使用，那么在函数里增加一个带autocompleteurl的参数。

$('#tags').tagsInput({
      autocomplete_url:'http://myserver.com/api/autocomplete'
    });

如果你使用了bassistance.de这个网站上的jQuery.autocomplete插件，还可以增加额外的参数来加强autocomplete插件，就像下面描述的这样。

$('#tags').tagsInput({    
      autocomplete_url:'http://myserver.com/api/autocomplete',
      autocomplete:{selectFirst:true,width:'100px',autoFill:true}
    });

PS：需要注意的是，demo里默认用的是jquery uiautocomplete，如果你想要测试jquery.autocomplete，要把头部被注释掉的引用文件去掉注释，并将$('\#tags').tagsInput(\{\})中autocomplete\_url的地址改为相应的jquery.autocomplete的文件。具体看页面上有说明。

你还可以使用addTag() andremoveTag()函数增加和删除掉标签，如以下：

$('#tags').addTag('foo');
    $('#tags').removeTag('bar');

你还可以用imporTags()方法导进一组tag列表，需要注意的是这样会将value里设置的默认tag替换掉

$('#tags').importTags('foo,bar,baz');

所以如果importTags()里不带值的话，就是重置input里的标签值（注意引号要保留，可以理解为给它传空值。）

$('#tags').importTags('');

可以使用tagExist()判断一个标签是否存在：

if ($('#tags').tagExist('foo')) { ... }

如果想要在增加或移除掉标签的时候增加额外的功能或触发其它动作，你可以通过onAddTag和onRemoveTag这两个参数里指定回调函。这两个函数都返回了一个标签值作为参数(原文： Bothfunctions should accept a single tag as the parameter.)

![复制代码][jQuery_wbr_Tags_wbr_Input_wbr_Plugin]

$('#tags_1').tagsInput({
                    width:'auto',
                    onAddTag:function(tag){
                        console.log('增加了'+tag)
                    },
                    onRemoveTag:function(tag){
                        console.log('删除了'+tag)
                    }
                });

![复制代码][jQuery_wbr_Tags_wbr_Input_wbr_Plugin]

如果你想禁止增加标签，或者你想提供其它交互方式增加标签，可以增加一个值为false的interactive参数，这样就禁止了增加标签，而其它的功能和呈现都跟原来一样。

![复制代码][jQuery_wbr_Tags_wbr_Input_wbr_Plugin]

$('#tags_1').tagsInput({
                    width:'auto',
                    onRemoveTag:function(tag){
                        console.log('remover'+'"'+tag+'"')
                    },
                    interactive:false
                });

![复制代码][jQuery_wbr_Tags_wbr_Input_wbr_Plugin]

如果你想要在每次增加/删除一个标签的时候调用一个函数，可以增加onChange的参数，并设置回调函数

默认情况下，如果鼠标位于一个标签后面，按退格键会删除掉那个标签。如果你想禁止这个，设置removeWithBackspace参数为false即可。

参数：

![复制代码][jQuery_wbr_Tags_wbr_Input_wbr_Plugin]

$(selector).tagsInput({
       'autocomplete_url': url_to_autocomplete_api, //自动完成插件的文件地址，demo里有说明
       'autocomplete': { option: value, option: value}, //自动完成插件的参数，demo有说明。（提供个jquery.autocomplete的：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/）
       'height':'100px', //设置高度
       'width':'300px',  //设置宽度
       'interactive':true, //是否允许添加标签，false为阻止
       'defaultText':'add a tag', //默认文字
       'onAddTag':callback_function, //增加标签的回调函数
       'onRemoveTag':callback_function, //删除标签的回调函数
       'onChange' : callback_function, //改变一个标签时的回调函数
       'removeWithBackspace' : true, //是否允许使用退格键删除前面的标签，false为阻止
       'minChars' : 0, //每个标签的小最字符
       'maxChars' : 0 //每个标签的最大字符，如果不设置或者为0，就是无限大
       'placeholderColor' : '#666666' //设置defaultText的颜色
    });

![复制代码][jQuery_wbr_Tags_wbr_Input_wbr_Plugin]

[jQuery TagsInput Plugin]: http://www.cnblogs.com/mofish/archive/2012/11/30/2796707.html
[http_xoxco.com_projects_code_tagsinput]: http://xoxco.com/projects/code/tagsinput/
[jQuery_wbr_Tags_wbr_Input_wbr_Plugin]: /images/20220614/8ee8dc30026e4984b5d4fd3f345f3b33.png

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap-tagsinput禁止用户修改tag

禁止用户修改： $( "tagsInputId" ).prop( "disabled", true ); 参考：[https://github.com/bootst

落日映苍穹つ/ 2023年06月30日 02:23/ 0 赞/ 9 阅读

相关 [JQuery] JQuery详解

前言：上一篇介绍了[AJAX][]，接着在这里在记录一下JQuery。什么是JQuery JQuery是一个JAVAScript函数库/ JQuery是一个

深藏阁楼爱情的钟/ 2023年06月28日 11:13/ 0 赞/ 21 阅读

相关 jQuery TagsInput

[jQuery TagsInput Plugin（添加/删除标签插件）][jQuery TagsInput Plugin] 看名字应该知道是干嘛用了吧。一个jquer

布满荆棘的人生/ 2022年06月14日 03:15/ 0 赞/ 208 阅读

相关 jquery school(jquery学堂)

给大家推荐一个学习jquery和jquery特效的好网站： jquery school(jquery学堂) [www.jq-school.com][] 使用百度竟然搜索不

今天药忘吃喽~/ 2022年05月13日 00:10/ 0 赞/ 194 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 439 阅读

相关 jQuery-什么是jQuery

什么是 jQuery ？ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以

待我称王封你为后i/ 2022年04月17日 06:57/ 0 赞/ 274 阅读

相关 jquery school(jquery学堂)

给大家推荐一个学习jquery和jquery特效的好网站： jquery school(jquery学堂) [www.jq-school.com][] 使用百度竟然搜索不

谁践踏了优雅/ 2022年04月15日 07:44/ 0 赞/ 212 阅读

相关 jquery school(jquery学堂)

给大家推荐一个学习jquery和jquery特效的好网站： jquery school(jquery学堂) [www.jq-school.com][] 使用百度竟然搜索不

痛定思痛。/ 2022年04月15日 07:44/ 0 赞/ 208 阅读

相关 tagsinput组件和图标下载网址

详细介绍与相关文件的下载可以参考 http://www.jqueryscript.net/demo/Nice-Tags-Manager-Plugin-with-jQuery-

àì夳堔傛蜴生んèń/ 2021年10月15日 14:01/ 0 赞/ 337 阅读

相关 jquery.tagsinput.js，不错的标签输入框

一、效果 ![图片描述][20160815155117517] 二、组件下载 [https://github.com/xoxco/jQuery-Tags-Inpu

小鱼儿/ 2021年05月10日 11:18/ 0 赞/ 638 阅读