1. 程式人生 > >BootstrapTagsInput-基礎避坑指南

BootstrapTagsInput-基礎避坑指南

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