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

人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On Railsで検索可能なセレクトボックスを実装(select2)

スポンサーリンク

本日は、Ruby On Railsで検索可能なセレクトボックスを実装します。

下記サイトを参考にしました。

https://github.com/argerim/select2-rails

 

1.インストール

rootでログインします。

# su - rails

$ cd work/foo

$ vi Gemfile

Gemfileファイルに以下を追記します。

gem "select2-rails"

以下コマンドを実行します。

$ bundle install

$ vi app/assets/javascripts/application.js

app/assets/javascripts/application.jsファイルに以下を追記します。

//= require select2
//= require js/select2
//= require select2_locale_ja

以下コマンドを実行します。

$ vi app/assets/stylesheets/application.css

app/assets/stylesheets/application.cssファイルに以下を追記します。

*= require select2

以下コマンドを実行します。

$ mkdir app/assets/javascripts/js/

$ vi app/assets/javascripts/js/select2.js

app/assets/javascripts/js/select2.jsファイルに以下を追記します。

$(document).ready(function($){
  $( ".dropdown" ).select2({
      width:      250
  });
});

以下コマンドを実行します。

$ rake assets:clobber
$ rake assets:precompile

 

 

2.セレクトボックスの記述をする

$ vi app/views/users/index.html.erb

app/views/users/index.html.erbファイルに以下を追記します。

     <select class="dropdown">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>

最後に、以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

 

3.動作確認

 セレクトボックスに検索窓が追加されて、検索できれば完了です。

 

f:id:hinthint:20160926150138p:plain

f:id:hinthint:20160926150145p:plain