前端：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'
});