Google 検索のようなキーワードサジェストを実装する際、以下の jQuery プラグインが使いやすくてよかったです。というメモ。
ソースコードはこちら
利用方法
プラグインを読み込む。
<script src="js/jquery.autocomplete.min.js"></script>
キーワードサジェストを適用するテキストボックスを用意。
<input type="text" id="autocomplete">
今回はサンプルということで、Ajax ではなく内部に埋め込んであるデータを読み込む。
$(function() { var values = [ { value: 'foo', id: '1', name: 'FOO' }, { value: 'bar', id: '2', name: 'BAR' }, { value: 'baz', id: '3', name: 'BAZ' }, { value: 'hoge', id: '4', name: 'HOGE' }, { value: 'fuga', id: '5', name: 'FUGA' } ]; $('#autocomplete').autocomplete({ lookup: values, onSelect: function(suggestion) { console.log('id: ' + suggestion.id + ', name: ' + suggestion.name); } }); });
$('#autocomplete').autocomplete({ ... でテキストボックスに対してキーワードサジェストを適用する。lookup プロパティには、サジェストするデータを格納したオブジェクトを指定する。内部的にはオブジェクトの value プロパティの値がマッチングに使われる模様。
onSelect プロパティには、サジェストされた候補から選択したときにコールバックされる関数を指定する。
表示データを Ajax で取得する場合
serviceUrl に Ajax のリクエスト URLを指定する。レスポンスは JSON 形式であること。
$('#autocomplete').autocomplete({ serviceUrl: '<ajax-url>', onSelect: function(suggestion) { console.log('id: ' + suggestion.id + ', name: ' + suggestion.name); } });
Ajax のレスポンスをごにょごにょする場合は以下でイケる。
$('#autocomplete').autocomplete({ lookup: function(query, done) { $.ajax({ type: 'GET', url: '<ajax-url>', data: 'query=' + query, dataType: 'json', success: function(res) { // レスポンスをごにょごにょして done に渡す // res = { suggestions: [ { value: 'foo', id: '1', name: 'FOO' }, ... ] }; done(res); }, }); }, onSelect: function(suggestion) { console.log('id: ' + suggestion.id + ', name: ' + suggestion.name); } });
