從Bootstrap Typeahead換成Twitter Typeahead

Comments

Bootstrap 在 3 之前提供了一個叫做 Typeahead 的元件，用途就是在輸入框中根據使用者目前的輸入，先到後台做查詢並且顯示可能的結果。不過這元件在 Bootstrap 3 被拿掉了，官方給的建議是改用 Twitter Typeahead。

Bootstrap Typeahead

Bootstrap Typeahead 要提供候選資料的方式有兩種，一是靜態資料，可以寫在 HTML 中如下：

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona"]'>

或者在 JavaScript 中指定：

$('.typeahead').typeahead({
    source: ["Alabama","Alaska","Arizona"]
});

另一種方式則是從遠端載入，而遠端載入的時候可以決定要不要加搜尋參數，也就是說連接的資料可以是伺服器上的靜態 json 檔案，也可以是動態回應的搜尋結果。範例如下：

$('.ajax-typeahead').typeahead({
  source: function(query, process) {
    return $.ajax({
      url: '/item/search.json',
      type: 'get',
      data: {
        q: query
      },
      dataType: 'json',
      success: function(json) {
        if (typeof(json) === 'undefined' || json === null) {
          return false;
        } else {
          return process(json.map(function(item) {
            return item.title;
          }));
        }
      }
    });
  }
});

如果想要看 CoffeeScript 版的：

$('.ajax-typeahead').typeahead {
    source: (query, process) ->
        $.ajax {
            url: '/item/search.json',
            type: 'get',
            data: {q: query},
            dataType: 'json',
            success: (json) ->
                if typeof json == 'undefined' || json == null then false else process(json.map (item) -> item.title)
            }
}

老實說這用法有點複雜…

Twitter Typeahead

要換成 Twitter Typeahead 其實相當簡單，首先在網頁上匯入 typeahead.js，接著一樣用 $('.ajax-typeahead').typeahead() 的方法呼叫，只是指定候選資料的方式不太一樣。Twitter Typeahead 指定候選資料的參數有三種：

  1. local：直接寫在網頁中，是個字串陣列
  2. prefetch：遠端 Server 上的 JSON 檔
  3. remote：Server query，預設的 query string token 是 %QUERY，可以用 remote 自己的 wildcard 這個 option 指定

這幾個參數的特點是可以混著用。你可以把最基本的幾個選項直接寫在 local 中，剩下靜態的資料用 prefetch 抓取，最後真的查不到的資料再到 remote 去查。範例（修改自Twitter 範例）如下：

$('input.typeahead-devs').typeahead({
  name: 'accounts',
  local: ['timtrueman', 'JakeHarding', 'vskarich'],
  prefetch: 'https://twitter.com/network.json',
  remote: 'https://twitter.com/accounts?q=%QUERY'
});

另外，Twitter Typeahead 可以提供多個資料集（dataset），只要將每個 dataset 放在陣列中傳入即可，官方範例寫得相當清楚：

$('.example-sports .typeahead').typeahead([
  {
    name: 'nba-teams',
    prefetch: '../data/nba.json',
    header: '<h3 class="league-name">NBA Teams</h3>'
  },
  {
    name: 'nhl-teams',
    prefetch: '../data/nhl.json',
    header: '<h3 class="league-name">NHL Teams</h3>'
  }
]);

Twitter Typeahead 還有些進階的應用，例如可以設計候選清單每個 cell 的樣式，除了直接將候選詞用 JSON 陣列回傳之外，也可以回傳 Twitter Typeahead 自己定義的 JSON 結構（Datum），以做到更精細的控制或呈現。

詳細文件可以參考

Contents

comments powered by Disqus