Yuto Blog

Yuto Blog

Ruby on Rails 7 search selectbox with select2 and stimulus

Install select2 and jQuery

Copy
1
yarn add select2 jquery
Create select2 controller
Copy app/frontend/controllers/select2_controller.js
1
2
3
4
5
6
7
8
9
10
11
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()
    $('.select2').select2();
  }
}
Copy app/frontend/controllers/index.js
1
2
import Select2Controller from "./select2_controller"
application.register("select2", Select2Controller)

Use select2 in views

Copy *.html.slim
1
2
3
4
      div data-controller="select2"
        = f.input :product_id,
          collection: Product.all,
          input_html: { class: 'select2' }
Created by Yuto at 2022-01-26 19:37
1
Like this article
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.