Ruby on Rails5でselect2を使う方法

今回はRuby on Railsで検索可能なセレクトボックスのselect2を使う方法を使用したいと思います。

最終的にはECサイトを作成したいと思います。

環境

OS/ミドルウェア	バージョン
CentOS	7.2.1511
ruby	2.4.2p198
Rails	5.1.4

select2-railsのインストール

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

ディレクトリの場所「アプリケーション名/」

対象ファイル「Gemfile」

[ファイルの編集]

$ vi Gemfile

1	$ vi Gemfile

[ファイルの中身]

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.4'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.18', '< 0.5'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem "jquery-rails"
gem "jquery-turbolinks"
gem "select2-rails"

source 'https://rubygems.org'

git_source(:github) do |repo_name|

repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")

"https://github.com/#{repo_name}.git"

end

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

gem 'rails', '~> 5.1.4'

# Use mysql as the database for Active Record

gem 'mysql2', '>= 0.3.18', '< 0.5'

# Use Puma as the app server

gem 'puma', '~> 3.7'

# Use SCSS for stylesheets

gem 'sass-rails', '~> 5.0'

# Use Uglifier as compressor for JavaScript assets

gem 'uglifier', '>= 1.3.0'

# See https://github.com/rails/execjs#readme for more supported runtimes

gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views

gem 'coffee-rails', '~> 4.2'

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

gem 'turbolinks', '~> 5'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

gem 'jbuilder', '~> 2.5'

# Use Redis adapter to run Action Cable in production

# gem 'redis', '~> 3.0'

# Use ActiveModel has_secure_password

# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment

# gem 'capistrano-rails', group: :development

group :development, :test do

# Call 'byebug' anywhere in the code to stop execution and get a debugger console

gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

# Adds support for Capybara system testing and selenium driver

gem 'capybara', '~> 2.13'

gem 'selenium-webdriver'

end

group :development do

# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.

gem 'web-console', '>= 3.3.0'

gem 'listen', '>= 3.0.5', '< 3.2'

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring

gem 'spring'

gem 'spring-watcher-listen', '~> 2.0.0'

end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem "jquery-rails"

gem "jquery-turbolinks"

gem "select2-rails"

[追加した部分]

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

gem "jquery-rails" # jQueryを使用できるようにする

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

gem "select2-rails" # select2を使用できるようにする

私の場合は、「jquery-rails」がデフォルトで記載していなかった為、追加します。

[bundleインストール]

$ bundle install

1	$ bundle install

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

ディレクトリの場所「app/assets/javascripts/」

対象ファイル「application.js」

[ファイルの編集]

$ vi app/assets/javascripts/application.js

1	$ vi app/assets/javascripts/application.js

[ファイルの中身]

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require rails-ujs
//= require select2
//= require turbolinks
//= require_tree .
//= require_self

// This is a manifest file that'll be compiled into application.js, which will include all the files

// listed below.

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's

// vendor/assets/javascripts directory can be referenced here using a relative path.

// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the

// compiled file. JavaScript code in this file should be added after the last require_* statement.

// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details

// about supported directives.

//= require jquery

//= require jquery_ujs

//= require jquery.turbolinks

//= require rails-ujs

//= require select2

//= require turbolinks

//= require_tree .

//= require_self

[追加した部分]

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

//= require jquery

//= require jquery_ujs

//= require jquery.turbolinks

//= require select2

//= require_self

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

ディレクトリの場所「app/assets/stylesheets/」

対象ファイル「application.css」

[ファイルの編集]

$ vi app/assets/stylesheets/application.css

1	$ vi app/assets/stylesheets/application.css

[ファイルの中身]

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require select2
 *= require_tree .
 *= require_self
 */

* This is a manifest file that'll be compiled into application.css, which will include all the files

* listed below.

* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's

* vendor/assets/stylesheets directory can be referenced here using a relative path.

* You're free to add application-wide styles to this file and they'll appear at the bottom of the

* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS

* files in this directory. Styles in this file should be added after the last require_* statement.

* It is generally better to create a new file per style scope.

*= require select2

*= require_tree .

*= require_self

[追加した部分]

*= require select2

1	*= require select2

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

ディレクトリの場所「app/assets/javascripts/」

対象ファイル「shopping.coffee」

[ファイルの編集]

$ vi app/assets/javascripts/shopping.coffee

1	$ vi app/assets/javascripts/shopping.coffee

[ファイルの中身]

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$ ->
  $(".searchable").select2({
    width:      200,
    #allowClear: true
  })

# Place all the behaviors and hooks related to the matching controller here.

# All this logic will automatically be available in application.js.

# You can use CoffeeScript in this file: http://coffeescript.org/

$ ->

$(".searchable").select2({

width: 200,

#allowClear: true

})

[追加した部分]

$ ->
  $(".searchable").select2({
    width:      200, # 横幅
    #allowClear: true # x で選択したものを削除できる
  })

$ ->

$(".searchable").select2({

width: 200, # 横幅

#allowClear: true # x で選択したものを削除できる

})

※「allowClear: true」はエラーが出たので一旦コメントアウトにしてます。

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

ディレクトリの場所「app/views/shopping/」

対象ファイル「index.html.erb」

[ファイルの編集]

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

1	$ vi app/views/shopping/index.html.erb

[ファイルの中身]

<div id="header">
    <div class="nav-left">
        <div id="head-logo">
            <%= link_to image_tag('logo_001.png'), '/' %>
        </div><!-- head-logo -->
    </div><!-- nav-left -->
    <div id="nav-search">
        <%= form_tag '/', :method => 'get' do %>
            <p>
                <%= text_field_tag :search, params[:search] %>
                <%= submit_tag "検索", :name => nil %>
            </p>
        <% end %>
    </div><!-- nav-search -->
    <%= select_tag 'searchDropdownBox', options_for_select(["すべてのカテゴリー", "米", "野菜"]), class: "searchable" %>
</div><!-- header -->
<h1>Hello</h1>
<p>
    現在登録されているユーザは次のとおりです。
</p>

<p>
    <!-- アクションから渡されてきたモデルクラスのオブジェクトの配列の数だけ順にメールアドレスとパスワードを取得して画面に>表示 -->
    <% @users.each do |user| %>
      [メールアドレス] <%= user.email %>, [パスワード] <%= user.password %><br />
    <% end %>
</p>

<%= link_to image_tag('logo_001.png'), '/' %>

</div>

</div>

<%= form_tag '/', :method => 'get' do %>

<p>

<%= text_field_tag :search, params[:search] %>

<%= submit_tag "検索", :name => nil %>

</p>

<% end %>

</div>

<%= select_tag 'searchDropdownBox', options_for_select(["すべてのカテゴリー", "米", "野菜"]), class: "searchable" %>

</div>

<h1>Hello</h1>

<p>

現在登録されているユーザは次のとおりです。

</p>

<p>

<% @users.each do |user| %>

[メールアドレス] <%= user.email %>, [パスワード] <%= user.password %><br />

<% end %>

</p>

[追加した部分]

<%= select_tag 'searchDropdownBox', options_for_select(["すべてのカテゴリー", "米", "野菜"]), class: "searchable" %>

1	<%= select_tag 'searchDropdownBox', options_for_select(["すべてのカテゴリー", "米", "野菜"]), class: "searchable" %>

動作確認

それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。

[Railsサーバ起動]

$ rails server -b 0.0.0.0

1	$ rails server -b 0.0.0.0

ブラウザから次のURLへアクセスして下さい。

http://☓☓☓.☓☓.☓☓☓.☓☓:3000/

1	http://☓☓☓.☓☓.☓☓☓.☓☓:3000/

これで一通りの作業が終了しました。

Ruby on Rails5で環境構築

Ruby on Rails5でソースをGitLab管理

NetBeansでRubyを使う方法

Ruby on Rails5でコントローラーからテンプレートの表示

Ruby on Rails5でモデルの作成とデータベースの利用

Ruby on Rails5で画像に対してリンク設定

Ruby on Rails5で検索フォーム作成

Ruby on Rails5でselect2を使う方法

Ruby on Rails5でBootstrap4デザインにする

Ruby on Rails5で検索フォームと一体型になった検索ボタン作成方法

Ruby on Rails5でFontAwesomeを導入する方法(アイコンが使用可能)

Ruby on Rails5でBootstrap4のナビゲーションバーを使用する方法

Ruby on Rails5でBootstrap4のナビゲーションバーに画像(ロゴ)を設置

Ruby on Rails5でBootstrap4を使用しながらCSSを使用する

Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法

Ruby on Rails5でBootstrap4のドロップメニューログインアイコンを作成

Ruby on Rails5でBootstrap4のドロップメニューでカートアイコンを作成

Ruby on Rails5でBootstrap4のドロップメニューで注文履歴を作成

サマンサ

Ruby on Rails5でselect2を使う方法

環境

select2-railsのインストール

動作確認

関連

投稿者: samancha

Ruby on Rails5でselect2を使う方法

環境

select2-railsのインストール

動作確認

共有:

関連

投稿者: samancha

関連記事