Bootstrap-TokenField 標籤輸入

最近讓使用者上資料的時候，需要上類似標籤的資料。但礙於時間不足，無法自己刻，還好需求不是很複雜，於是找到了符合需求的元件，就是Bootstrap-TokenField。

由於是基於Bootstrap為基底開發出來的插件，所以風格也很有Bootstrap的味道。它能夠利用ajax結合遠端資料，實現自動完成(auto complete)並以標籤化(token field)的方式呈現。

使用環境：

Apache： 2.4.23
JQuery版本：1.10.2
Bootstrap版本：3.3.7
Bootstrap-TokenField版本：0.12.1，0.12.1版本可點此下載

效果圖：

使用方式：

1.首先須在HTML頁面引入入Bootstrap-Tokenfield的js、css檔案

<link rel="stylesheet" href=YOUR PATH/css/bootstrap-tokenfield.min.css">
<link rel="stylesheet" href=YOUR PATH/css/tokenfield-typeahead.min.css">
<script src="YOUR PATH/js/bootstrap-tokenfield.min.js"></script>

2.加入HTML物件 <input>

<input type="text" id="tokenfield" class="form-control"/>

3.初始化插件

<script type="text/javascript">

    $('#tokenfield').tokenfield({
        autocomplete: {
            source: 'YOUR_DATA_PATH', //資料URL，格式在第四步驟
            delay: 100
        },
        showAutocompleteOnFocus: true,
        limit: 5
    }).on('tokenfield:createtoken', function (e) {
        alert("生成token時觸發");
        //return false;  //如果在此return false，將不會產生token
    });

</script>

4.伺服器端須提供以下JSON資料格式(YOUR_DATA_PATH)

[
    {
        label: "【投資贏長】有夢最美　可多注意貨櫃海運轉機效應-豐沃投資理財學苑董事長　鄭培敏",
        value: "134"
    },  ......可能有多筆
]

參數說明

JSON欄位名稱	型態	數值	描述
autocomplete	Object	[]	Query UI Autocomplete(自動完成)選項
autocomplete.source	String	YOUR_DATA_PATH	自動完成提示字元來源URL(JSON)
autocomplete.delay	Number	100	提示字元出現延遲時間(ms)
showAutocompleteOnFocus	Boolean	true	是否將焦點設置於自動完成選單上
limit	Number	5	Tag的數量上限

遇到問題

若有特殊的效果可能要自己實作，例如不讓使用者選擇重複的資料

使用心得

此插件雖功能較少，不過再使用上來說較為方便，且簡單易懂。若需求不是太為複雜，可以用此插件去達到想要的效果。後續會再和大家介紹可以達到相同效果，但功能更為豐富的元件

參考文件

Getting Started、API、Demo Site