Ruby on Rails 7でselect2を導入方法

1
yarn add select2 jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Controller } from "@hotwired/stimulus"
import $ from 'jquery';
import 'select2/dist/css/select2.min.css'
import Select2 from "select2"

export default class extends Controller {
  connect() {
    Select2()
    $('.js-select2').select2()
    // select2ドロップダウンをクリックすると入力フィールドにフォーカスする
    $(document).on('select2:open', () => {
      document.querySelector('.select2-search__field').focus();
    });
  }
}

1
2
import Select2Controller from "./select2_controller"
application.register("select2", Select2Controller)

1
import '../controllers'

1
2
3
4
5
      div data-controller="select2"
        = f.input :product_id,
          collection: Product.all,
          include_blank: false,
          input_html: { class: 'js-select2' }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$select2-height: 38px;

.select2-container {
  .select2-selection--single {
    height: $select2-height;
    line-height: $select2-height;
    .select2-selection__arrow, .select2-selection__rendered {
      height: $select2-height;
      line-height: $select2-height;
    }
  }
  .select2-search--dropdown .select2-search__field {
    font-size: 16px;
    padding: 4px;
  }
}