jQuery Tags Input Plugin (add/remove tags plugin)

You should know what the name is for.

A tag function enhancement plug-in developed by jquery, which can generate or delete tags, and can also check the input duplicate tags, and cooperate with the JQuery autocomplete plug-in to realize the automatic completion function.

 Official website: http://xoxco.com/projects/code/tagsinput/

screenshot:

(The following is a translation of the usage on the official website, English is not very good, try to read the official website if you have the ability)

First, cite the following two files

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

Create an input box containing a list of tags in your form. You can set the default or existing tags in the value, and separate them with commas.

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

Then, simply call the tagsInput() function on any input tag and it will be treated as a list of tags

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

If you want to use it with jQuery.autocomalete (autocomplete plugin), add a parameter with autocomplete url to the function.

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

If you use the jQuery.autocomplete plugin from the bassistance.de website , you can also enhance the autocomplete plugin with additional parameters, as described below.

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

P S: It should be noted that jquery ui autocomplete is used by default in the demo. If you want to test jquery.autocomplete, you need to uncomment the reference file whose head is commented out, and add $('#tags'). The address of autocomplete_url in tagsInput({}) is changed to the corresponding jquery.autocomplete file. See the instructions on the page for details.

You can also add and remove tags using the addTag() and removeTag() functions, as follows:

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

You can also use the importTags() method to import a list of tags. It should be noted that this will replace the default tag set in the value.

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

So if there is no value in importTags(), it is to reset the tag value in the input ( note that the quotation marks should be retained, which can be understood as passing a null value to it. )

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

You can use tagExist() to determine whether a tag exists:

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

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

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

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

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

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

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

参数：

$(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的颜色
});