write ahead log

ロールフォワード用

Rails5で検索できるセレクトボックスを作りたい

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"
});