Railsで複数選択可能なselectタグを実装する

したいこと

複数選択可能なドロップダウンセレクトタグをさくっときれいに実装したい。

使うもの

bootstrap-select
色々探した中で一番シンプルかつ高機能で良さげだった。因みにMDBootstrapってのでもほとんど同じかんじのが導入できるけど有料(1年で2万円とか。でもめっちゃ高機能だしBootstrapみがない。どっかでみたことある)

bootstrap-selectの導入

Bootstrapの導入(※v5, '21/08/03時点でv5対応バージョンはベータ版)

以下を参照
https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a

その後に以下を追記(※正規版だと必要ないかも)

config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    Popper: 'popper.js',
    bootstrap: 'bootstrap' // 追記
  })
)

bootstrap-selectの導入

アプリのディレクトリで以下のコマンドを実行(※最新バージョンは08/03時点でベータ版なのでgitのリポジトリからインストールする)

$ yarn add https://github.com/snapappointments/bootstrap-select

app/assets/stylesheets/application.scss

/*
 *= require_tree .
 *= require_self
 *
 *= require bootstrap/scss/bootstrap
 *= 以下を追記
 *= require bootstrap-select/sass/bootstrap-select
 */

app/javascript/packs/application.js

import "bootstrap"
import "bootstrap-select" // 追記

実装

例) Groupモデルがmembersをhas_manyしていて、新しいgroupのmembersのidの配列を受け取る。

groups_controller.rb

def new
    @followers = current_user.followers
    @group = current_user.own_groups.build
end

private
    def group_params
        params.require(:group).permit(:name, :desc, members: []) # column: []
    end

app/view/groups/new.html.haml

= f.label :members, class: "form-label"
%select.selectpicker.border.rounded{name: "group[members][]", # object[method][]
                                    multiple: true,           
                                    data: {actions: {box: "true"}}}
    - @followers.each do |follower|
        = tag.option follower.name, value: follower.id

f.select, select_tagはmultiple適用できない?しdata属性を設定できないので使わない。
そのまま書くときのポイントは値を配列で返すため、[ ]が所々必要。
何も入力しないとf.selectとかと違ってそのままnilになるので注意。(f.selectは [" "] が返ってくる)
その他bootstrap-selectの機能に関しては以下を参照。