前端：TagsInput标签输入插件

Github：https://github.com/xoxco/jQuery-Tags-Input

引入插件

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

插件组件应用标签

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

使插件生效

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

添加和删除标签

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

初始化标签为指定内容或清空标签

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

检查标签是否存在

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

选项

$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api,
   'autocomplete': { option: value, option: value},
   'height':'100px',
   'width':'300px',
   'interactive':true, //是否可以通过输入增加标签，总可以通过addTag函数增加标签
   'defaultText':'add a tag',           //默认提示文字
   'onAddTag':callback_function,        //增加标签时执行回调函数
   'onRemoveTag':callback_function,     //删除标签时执行回调函数
   'onChange' : callback_function,      //标签变化时执行回调函数
   'delimiter': [',',';'],              //或单独分隔符. 例如: ';'
   'removeWithBackspace' : true,  //是否可通过Backspace键删除标签
   'minChars' : 0,             
   'maxChars' : 0,    // if not provided there is no limit
   'placeholderColor' : '#666666'
});