Typeaheadとjsonデータを使って入力サジェスト

Bootstrap3 から分離されてしまったtypeaheadの使い方めも。
Typeahead単体でも実現できそうですが、サジェスチョンエンジンBloodhoundを使います。

用意したjsonデータ
http://www.hogehoge.com/items/search/%QUERY.json で取得できるようにしました。

{
   "meta":{
      "url":"\/items\/search\/Sn.json",
      "method":"GET"
   },
   "response":[
      {
         "id":"1",
         "code":"0011110",
         "name":"喜連瓜破",
         "foreign_name":"Kireuriwari",
         "deleted":false
      },
      {
         "id":"2",
         "code":"0011120",
         "name":"十三",
         "foreign_name":"Juso",
         "deleted":false
      },
      {
         "id":"4",
         "code":"0011130",
         "name":"京終",
         "foreign_name":"Kyobate",
         "deleted":false
      }
   ]
}

Javascriptのコード

$(function(){
    var items = new Bloodhound({
        datumTokenizer: function(d) {return Bloodhound.tokenizers.whitespace(d.name); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit:10,
        remote: {
            url: 'http://www.hogehoge.com/items/search/%QUERY.json',
            filter: function(response){
                return $.map(response.response, function (item) {
                    return{ name: item.name, id: item.id };
                });
            }
        }
    });
    items.initialize();
 
    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 2
    }, {
        name:'items',
        displayKey: 'name',
        source: items.ttAdapter()
    });
});