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!!!!!