読者です 読者をやめる 読者になる 読者になる

jQuery プラグインを使ってインクリメンタルサーチを実装してみる

jQuery

jQuery プラグインを使って、Google 検索のようなインクリメンタルサーチを実装してみる。以下のプラグインが使いやすくてよかったです。というメモ。

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 で取得する場合

serviceUrlAjax のリクエスト 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);
  }
});

(2017/01/18 追記)
Ajax の動作を手軽に試すなら JSON Server が便利。

kntmr.hatenablog.com