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() }); });