jQuery Tags Input Plugin（添加/刪除標簽插件）

看名字應該知道是干嘛用了吧。

一個jquery開發的標簽功能加強插件，可以生成或刪除標簽，還能對輸入重復標簽進行檢查，和JQuery autocomplete插件配合實現自動完成功能。

 官網：http://xoxco.com/projects/code/tagsinput/

截圖：

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

首先，引用下面兩個文件

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

在你的表單里創建一個包含tags列表的input輸入框，你可以在value里設置默認或目前有的tags，並用逗號隔開。

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

然后，簡單地給任何一個輸入標簽調用tagsInput()函數，它便會被當作一個tags列表處理

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

如果你想使用jQuery.autocomalete（自動完成插件）配合使用，那么在函數里增加一個帶autocomplete url的參數。

$('#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 ui autocomplete，如果你想要測試jquery.autocomplete，要把頭部被注釋掉的引用文件去掉注釋，並將$('#tags').tagsInput({})中autocomplete_url的地址改為相應的jquery.autocomplete的文件。具體看頁面上有說明。

你還可以使用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這兩個參數里指定回調函。這兩個函數都返回了一個標簽值作為參數(原文： 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的顏色
});