select2というjquery-pluginがあってこれを使うと良い感じになりそう.
(jQuery捨てるとか私の様な三流には無理そうです.ほとんどこれで十分だし...)
これをRailsから利用するgemがあるのでこれを利用します.
適当なサンプルを用意する
都道府県を選ぶ画面を用意するために適当なプロジェクトとコントローラ・ビューを用意します.
$ rails new select2_sample $ rails g controller Prefectures
config/routesも編集. 以下を追加.
resources :prefectures
gemを追加する
Gemfileに以下を追記.
gem 'jquery-rails' gem 'select2-rails'
いつも通り更新.
$ bundle install
適当なビューを作る
雑に都道府県をべた張り.
<!-- app/views/prefectures/index.html.erb --> <!-- railsのヘルパーで生成 --> <%= select_tag 'searchDropdownBox', options_for_select(["都道府県", "北海道", "青森", "岩手"]), class: "searchable" %> <!-- 普通のHTMLタグ --> <select> <option>北海道</option> <option>青森</option> <option>岩手</option> <option>宮城</option> <option>秋田</option> <option>山形</option> <option>福島</option> <option>茨城</option> <option>栃木</option> <option>群馬</option> <option>埼玉</option> <option>千葉</option> <option>東京</option> <option>神奈川</option> <option>新潟</option> <option>富山</option> [中略] </select>
この時点で動作確認すると普通にセレクトボックスが表示されます.
Railsアプリケーションへのselect2の導入
bundleでの導入以外に以下が必要です.
- application.jsへjqueryのrequireを追加
- application.jsへselect2のrequireを追加
- application.cssへselect2のrequireを追加
具体的には以下になりました.
application.js
[中略] //= require rails-ujs //= require turbolinks //= require jquery //= require select2 //= require_tree .
application.css
[中略] *= require select2 *= require_tree . *= require_self
都道府県選択へselect2を導入する
bundleで導入済みなのでここからはRailsで使えるようにしていきます.
導入には以下が必要です.
- select2を使うcoffeeを変更(この場合はprefectures.coffeeを変更)
こちらの具体例は以下.
prefectures.coffee
$ -> $('.searchable').select2({ width: 200, })
bootstrapと一緒に使う
bootstrapと共に利用するには, まずbootstrapを導入してapplication.scssへ以下のように変更.
[中略] * *= require select2 */ @import "bootstrap-sprockets"; @import "bootstrap";
日本語化
application.jsに以下を追記.
//= require select2 //= require select2_locale_ja # これ //= require_tree .
jsで設定する際にパラメータへlanguageを追加.
$( ".searchable" ).select2({ language: "ja" });