JQuery标签输入插件jQuery Tags Input

简介

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

您是否使用标签来组织网站上的内容？这个插件会把你无聊的标签列表变成一个神奇的输入，把每个标签变成一个有自己删除链接的风格对象。该插件处理所有数据-您的表单只看到一个逗号分隔的标签列表！

（下载的附件中附有DEMO）

配置项：

$(selector).tagsInput({
  'autocomplete_url': url_to_autocomplete_api,
  'autocomplete': { option: value, option: value},
  'height':'100px',
  'width':'300px',
  'interactive':true,
  'defaultText':'add a tag',
  'onAddTag':callback_function,
  'onRemoveTag':callback_function,
  'onChange' : callback_function,
  'delimiter': [',',';'],
  // Or a string with a single delimiter. Ex: ';'
  'removeWithBackspace' : true,
  'minChars' : 0,
  'maxChars' : 0, 
  // if not provided there is no limit
  'placeholderColor' : '#666666'
});

使用

1.  引入文件

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

2.  HTML

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

3.  调用

$('#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}
});

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

$('#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这两个参数里指定回调函。这两个函数都返回了一个标签值作为参数：

$('#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即可。

相关链接

GitHub 地址 ：https://github.com/xoxco/jQuery-Tags-Input

Gitee 地址 ：https://gitee.com/mirrors/jQuery-Tags-Input