select2 で “No Results Found” などのメッセージを変更する

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

jquery を拡張し selectボックス(プルダウンメニュー、ドロップダウンリスト、リストボックス)に対してデザインを整えたりタグやプレースホルダテキストや検索の機能を加える select2 があります。検索が成功していないときに表示されるメッセージを変更したくて時間を費やしたので記載します。

参考

本体
https://select2.github.io/

使用例
https://select2.github.io/examples.html

基本的な使い方

jquery, select2 プラグインと関連のcssを読み込んでおく。
検索機能やスタイルを付与したいセレクトボックスをjqueryのセレクター ‘$()’ で指定して select メソッドを呼ぶだけです。select に引数(連想配列的な何か)を渡すことでカスタマイズできます。検索の時にちらっと表示されるメッセージもそこで上書きできます。

例 (coffeescript)

$(document).ready(->
  $('#select_box').select2()

こんなことをしました。

$(document).ready(->
  $('.select2').each(->
    $select = $(this)
    options = {}
    options.language = {}
    options.language.noResults = ->
      '該当するものがありません。' # 0件ヒットのときのメッセージ : No Results Found
    options.language.searching = ->
      '検索中' # 検索中のメッセージ :  Searching...
    options.language.errorLoading = ->
      '検索中' # 検索が失敗しているときのメッセージ: Error loading results
    $select.select2(options)

※ 文字列を返すのだけれど文字列を入れるのではなく文字列を返す関数を入れるところに気をつけましょう。