1.簡介
BootstrapTagsInput是一個基於jQuery和Bootstrap.css的用於管理標籤的插件。
官網在這：官網
這個官網呢，怎麼說呢，比較簡潔。示例聊勝於無。
最簡單的用法就是在引入jquery,和Bootstrap的前提下，在input標籤中添加 data-role="tagsinput"，即可初始化。
<input type="text" value="" data-role="tagsinput" />原因在於下方代碼，代碼最後一部分，寫了是如何初始化的。
/**
* Initialize tagsinput behaviour on inputs and selects which have
* data-role=tagsinput
*/
$(function() {
$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
});還有一個通過 select標籤初始化的方式。並在標籤加上 multiple 屬性，在通過$("select").tagsinput('items')，獲取值時，返回的是一個數組，而不是逗號分隔的字符串了。
<select multiple data-role="tagsinput">
<option value="Amsterdam">Amsterdam</option>
<option value="Washington">Washington</option>
<option value="Sydney">Sydney</option>
<option value="Beijing">Beijing</option>
<option value="Cairo">Cairo</option>
</select>以上兩個方法都會將現有value值或者option元素，自動設置爲標籤。
2.Typeahead&Typeahead
一般來說，如果你只使用輸入，回車成爲標籤的功能，那你可能遇不到什麼坑。
但是一旦你遇到了根據用戶輸入顯示相關補全/提示/預輸入的需求時，坑就來了。
2.1 Typeahead(預先輸入)
在其文檔中，有一個介紹，就是關於Typeahead的，他是這麼說的：
Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js. An example of using this is shown below.
大意是：Bootstrap 3中已經不包含Typeahead啦，如果你想用，你必須自己引入的Typeahead庫。
我們推薦了typeahead.js。下面是使用此示例的示例。巴拉巴拉。
<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
<script>
var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'assets/citynames.json',
filter: function(list) {
return $.map(list, function(cityname) {
return { name: cityname }; });
}
}
});
citynames.initialize();
$('input').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
</script>-------------------------------------------------------------------------------------------------------------------------------------------------------------
然後在其文檔下方有個Options介紹表，裏面有一項關於typeahead的介紹，其中關於source的介紹是：
An array (or function returning a promise or array), which will be used as source for a typeahead.
大意是：一個數組（或返回一個承諾或數組的函數）,它將用typeahead的數據源。
2.2 眼睛瞪得像銅鈴 射出閃電般的精明
說實話，tagsinput 這文檔給我一種什麼感覺呢？
就是=>饒你奸似鬼!照樣喝老孃的洗腳水！
上面說了，他給了一個推薦的Typeahead示列，然後下方的option表中有其對應的描述。
如果你只是直接複製示例代碼，直接運行，你會遇到別的坑，但是我要說的是，睜大眼睛，仔細觀瞧!
在初始化tagsinput時有兩個預輸入選項，一個是typeaheadjs,另一個是typeahead。
看出區別了嗎？區別多了一個js!!!!!