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

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

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