railsでselectタグにselect2を適用する方法

初めに

select2はセレクトボックスを拡張して、項目内検索や無限スクロールを簡単に実装することができるものです。
詳しくはselect2の公式サイトやselect2-railsのgithubをご覧ください。

動作環境

os:    AlmaLinux8.5
ruby:  3.1.1p18
rails: 6.1.5

select2のインストール

1. 以下の記述をGemfileに追加して下さい。

# Gemfile
gem 'select2-rails'

2. プロジェクトルートでbundle installを実行しgemをローカルにインストールします。

# bash
bundle install

select2の初期設定

1. ユーザーが記述したjavascriptより前に読み込みたい^[1]ので、application.jsに以下の記述を追加します。

 //assets/javascripts/application.js
 //= require jquery3
 //= require popper
 //= require bootstrap
+//= require select2
+//= require select2_locale_"ja"
 //= require_tree .

2. application.css or application.scssに以下の記述を追加します。

 //assets/stylesheets/application.css or application.scss
 /*
  *= require_tree .
  *= require_self
+ *= require select2
  */

select2の適用方法

1. railsのselectタグにselect2を適用するには適当な.jsファイルに以下の記述を追加します。

/*セレクトボックスにselect2を適応する */
function enable_select2() {
  $(document).ready(function() {
    $('#select2を適用したいselectタグのid').select2();
  });
}

2. view側で実行してほしい無名関数を指定します。

<script>enable_select2();</script>

select2を適用したselectタグを開いた時に常に下側にドロップダウンさせる方法

1. 有志が作成したもの^[2]を追加後、select2のオプションを追加します。

 /*セレクトボックスにselect2を適応する */
 function enable_select2() {
   $(document).ready(function() {
     $('#select2を適用したいselectタグのid').select2(
+      {dropdownPosition: 'below'}
     );
   });
 }

脚注

1. 後ほど、セレクトボックスを開いた時に常に下側にドロップダウンするようにするのでユーザー定義のjavascriptファイルが先に読み込まれるとエラーになる為

2. https://github.com/select2/select2/issues/2710 で当面の間提供する計画はないとのことだったので自己責任でお願いします。