Google 検索のようなキーワードサジェストを実装する際、以下の jQuery プラグインが使いやすくてよかったです。というメモ。
www.devbridge.com
ソースコードはこちら
github.com
利用方法
プラグインを読み込む。
<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);
},
});
},
onSelect: function(suggestion) {
console.log('id: ' + suggestion.id + ', name: ' + suggestion.name);
}
});
(2017/01/18 追記)
Ajax の動作を手軽に試すなら JSON Server が便利。
kntmr.hatenablog.com