bootstrap-select-railsとは

bootstrap-selectという、selectを拡張するjQueryプラグインがあります。bootstrap-selectをRailsアプリケーションに導入するためのgemにbootstrap-select-railsがあります。

bootstrap-select-railsを試す

早速、試してみましょう。

Railsアプリケーションを作る

ホスト環境のRubyを使わずにDockerを使ってRails newするを参考にして空のRailsアプリケーションを作成します。

sprockets-railsを有効に

アセットファイルのコンパイルを有効にするためにsprockets-railsを有効にします。
DockerfileでOSにインストールするapkパッケージにnodejsを追加します。

FROM ruby:2.5-alpine

ENV BUILD_PACKAGES="curl-dev ruby-dev build-base" \
    DEV_PACKAGES="zlib-dev libxml2-dev libxslt-dev tzdata yaml-dev sqlite-dev" \
    RUBY_PACKAGES="ruby-json yaml nodejs"

# Update and install base packages and nokogiri gem that requires a
# native compilation
RUN apk update && \
    apk upgrade && \
    apk add --no-cache --update\
    $BUILD_PACKAGES \
    $DEV_PACKAGES \
    $RUBY_PACKAGES && \
    mkdir -p /usr/src/myapp

# Copy the app into the working directory. This assumes your Gemfile
# is in the root directory and includes your version of Rails that you
# want to run.
WORKDIR /usr/src/myapp
COPY Gemfile /usr/src/myapp
COPY Gemfile.lock /usr/src/myapp

RUN gem install bundler
RUN bundle config build.nokogiri --use-system-libraries && \
    bundle install --jobs=4 --retry=10 --clean

rails newのオプションを次のように変更します。

docker run --rm -v (pwd):/usr/src/myapp temp rails new . -f -MCTBS --skip-yarn

編集画面を作る

編集画面があれば何でもいいので、いつも忘れる「Railsのgenerateコマンド」の備忘録 - maeharinの日記の

rails generate scaffold AdminUser name:string mail:string

をそのまま実行します。

docker run --rm -v (pwd):/usr/src/myapp temp rails generate scaffold AdminUser name:string mail:string

Railsを起動して、上手く編集画面が作れているか確認しましょう。

docker run --rm -it -v (pwd):/usr/src/myapp -p 80:3000 temp bin/rails s -b 0.0.0.0

http://localhost/admin_users を開きます。

フォームにselectを追加

app/views/admin_users/_form.html.erbを編集してselect要素を追加します。

<%= form_with(model: admin_user, local: true) do |form| %>
  <select>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
  </select>
<% end %>

次のような見た目になります。

htmlのselect要素のままの見た目です。

bootstrap-select-railsの導入

bootstrap-select-railsはjqueryとbootstrapに依存しています。
Gemfileに次の行を追加します。

gem 'jquery-rails'
gem 'bootstrap'
gem 'bootstrap-select-rails'

bootstrapgemを使うにはjqueryとpopperとbootstrap-sprocketsが必要です。
これにbootstrap-selectを加えて、application.jsに次の行を追加します。

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require bootstrap-select

bootstrapgemを使うには、scssにする必要があります。
application.cssをapplication.scssにリネームし、次の内容に変更します。

@import "bootstrap";
@import 'bootstrap-select';

app/views/admin_users/_form.html.erbを編集してselect要素にselectpickerクラスを追加します。

<%= form_with(model: admin_user, local: true) do |form| %>
  <select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
  </select>
<% end %>

見た目が少し格好よくなりました
selectを開くと次のイメージです。

Turbolinks 5 対応

今の状態では http://localhost/admin_users/new を直接開くと期待通りに動きます。
一度 http://localhost/admin_users を開いてから New Admin Userリンクをたどって新規追加画面を開くと、次のように期待しない動作をします。

Do not work with Turbolinks 5 well · Issue #31 · Slashek/bootstrap-select-railsを参考にしてして、application.jsに次のように変更します。

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require bootstrap-select

$(document).on('turbolinks:load', function() {
   $(window).trigger('load.bs.select.data-api');
});

これで、一度 http://localhost/admin_users を開いてから New Admin Userリンクをたどって新規追加画面を開いたときも、期待通りに動きます。

おまけ

この記事の実体は https://github.com/Slashek/bootstrap-select-rails/issues/31#issuecomment-480559605 で

This solution doesn't work for version 1.13.8.

と書かれていたので、「そんなことあるのかな？」と思い、動作確認するための環境を作る手順でした。

https://github.com/ledsun/sample-application-for-verifying-the-solution-for-bootstrap-select-rails-to-work-with-Turbolinks-5. で完成したソースコードを公開しました。