LoginSignup
10

More than 5 years have passed since last update.

JQuery Select2プラグインのリモート検索(インクリメンタルサーチ)

Last updated at Posted at 2017-07-04

Select2でリモート検索を実装してみたら、思いの外手こずったのでまとめておこうと思います。versionは4.0.3で試しました。

前提条件

  • /ajax-search-places.jsonにキーワードを渡すと、それによって絞り込まれた場所の一覧をJSONで返すようになっている。
  • 検索キーワードは、qパラメータに渡す。
    • /ajax-search-places.json?q=伊勢

場所一覧のJSON例

{
  places: [{
    id: 1,
    name: "伊勢市駅"
  }, {
    id: 2,
    name: "伊勢神宮外宮"
  }]
}

実装例

ajaxオプションを指定する

$("#my-select").select2({
  ajax: {
    url: "/ajax-search-places.json", # URL
    dataType: 'json', # お約束
    delay: 250, # 入力から検索開始までの待ち時間
    data: (params) ->
      # params.termに、選択ボックスで入力したキーワードが渡ってくる
      # それをqパラメータに渡す
      return {
        q: params.term,
      }
    ,
    processResults: (data, params) ->
      # dataにレスポンスのJSONが渡ってくる
      # id,textの組み合わせの配列に変換する
      results = $.map(data.places, (place) ->
        return {
          id: place.id,
          text: place.name
        }
      )
      # Select2が期待するフォーマットで返す(resultsにid,textの配列を渡す)
      return {
        results: results
      }
  },
  # 検索開始するまでの最低入力文字数
  minimumInputLength: 1,
  # Xボタンで未選択の状態にできるようにするならtrue
  allowClear: true
})

dataとprocessResultsの実装が大事。

  • params.termに入力したキーワードが渡ってくること
  • processResultsで、id,textの配列をresultsに渡して返すこと

ここをきちんとやらないと、うまくいきません。というかドキュメントが不親切な気が・・・

  • escapeMarkup
  • templateResult
  • templateSelection

サンプルには上記のプロパティが指定されていたりしますが、この辺はめったに使わないでしょう・・・例は最も簡単なものにしてほしかった。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10