読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

Railsで検索可能なセレクトボックスのselect2を使う方法

Rails gem UI/UX

select2とは

select2とは、セレクトボックスを検索可能なセレクトボックスにしてくれるjQueryプラグインです。
セレクトボックスの項目が多い場合、検索できないと選択が大変なのでとても便利です。
f:id:nipe880324:20141108173340p:plain:w260


※ Chosen という同じようなjQueryプラグインもあるのですが、Enterキーの処理がうまく動かなく日本語で検索しづらいのでこちらの方がオススメです。

動作確認環境

  • Rails 4.1
  • select2-rails 3.5.9.1

目次

  1. Railsプロジェクトの作成
  2. select2-railsのインストール
  3. select2にtwitter-bootstrapをインストール


Railsプロジェクトの作成

まずはRailsプロジェクトを作成します。

rails new select2_test
cd select2_test

次にselect2の挙動を確認するために、PersonをScaffoldで作成します。

rails g scaffold Person name:string

セレクトボックスで表示するためのデータをseeds.rbに記載します。

# db/seeds.rb

Person.create name: "鈴木太郎"
Person.create name: "鈴木一郎"
Person.create name: "田中太郎"
Person.create name: "田中一郎"

マイグレーションを実行し、データを投入します。

rake db:migrate
rake db:seed

そして、ここでは便宜上、一覧画面にセレクトボックスを追加します。

# app/views/people/index.html.erb

<!-- 一番下の行に追加 -->
<br />
<br />

<%= select_tag :person, options_from_collection_for_select(@people, :id, :name), include_blank: true %>


では、rails sでサーバーを起動し、セレクトボックスを確認してみます。
f:id:nipe880324:20141108173202p:plain:w320




select2-railsのインストール

Gemfileにselect2-railsを追加します。

# Gemfile

gem "jquery-turbolinks" # Turbolinksで遷移したときもjQuery.ready()を呼び出してくれる
gem "select2-rails"

そして、Bundlerでgemをインストールします。

bundle install


次に、assetsのapplication.jsにjQuery-turbolinksとselect2を追加します。

# app/assets/javascripts/application.js

...
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require select2
//= require turbolinks
//= require_tree .


assetsのapplication.cssにもselect2を追加します。

# app/assets/stylesheets/application.css

 ...
 *= require select2
 *= require_tree .
 *= require_self
 */

そして、CofffeeScriptを追記します。

# app/assets/javascripts/people.js.coffee

$ ->
  $(".searchable").select2({
      width:      200,  # 横幅
      allowClear: true  # x で選択したものを削除できる
      # 詳細は http://ivaynberg.github.io/select2/#documentation
    })

これで、select2を使いたいセレクトボックスのclass属性にsearchableを追加するだけでselect2が使えるようになります。
では、searchableを追加しましょう。

# app/views/people/index.html.erb

<%= select_tag :person, options_from_collection_for_select(@people, :id, :name), include_blank: true, class: "searchable" %>


再度rails sでサーバーを起動し、セレクトボックスを確認してみます。
f:id:nipe880324:20141108173220p:plain:w320



ちなみに、次のようにmultiple: trueを追加することで、複数選択にも対応しています。

# app/views/people/index.html.erb

<%= select_tag :person, options_from_collection_for_select(@people, :id, :name), include_blank: true, multiple: true, class: "searchable" %>

f:id:nipe880324:20141108173232p:plain:w320



もし、Twitter Bootstrapを使っている場合は、次の1行をapplication.cssに追加してください。

# app/assets/stylesheets/application.css

 ...
 *= require select2
 *= require select2-bootstrap
 *= require_tree .
 *= require_self
 */


以上です。