Select2
To further improve the select of our application, we will add a jquery package that will help us search through our select.
Table Of Contents
What is Select2?
Select2 is a jQuery-based alternative to select boxes. It allows searching, remote data sets, and result pagination.
How to install Select2?
Reminder:
Make sure that your containers are up and running.
Run yarn add select2.
root@0122:/usr/src/app# yarn add select2
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ select2@4.1.0-rc.0
info All dependencies
└─ select2@4.1.0-rc.0
Done in 2.50s.
Usage
Add a stimulus select2_controller.js that will setup select2.
// app/javascript/controllers/select2_controller.js
import {Controller} from "@hotwired/stimulus"
import select2 from 'select2'
window.select2 = select2();
export default class extends Controller {
connect() {
$('.select2').select2({}).on('select2:select', function () {
let event = new Event('change', {bubbles: true})
this.dispatchEvent(event)
})
}
}
This will initialize your select2 in every <select> that have class select2 once you load your select2 controller.
Now let’s import select2 controller and it’s style.
// app/javascript/controllers/index.js
// ...
import Select2 from "./select2_controller"
application.register("select2", Select2)
// app/assets/stylesheets/application.bootstrap.scss
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
+ @import 'select2/dist/css/select2';
Try it on our post location select.
<!-- app/views/posts/_form.html.erb -->
- <%= form_with model: post, data: { controller: :location } do |form| %>
+ <%= form_with model: post, data: { controller: 'location select2' } do |form| %>
<!-- ... -->
<div>
<%= form.label :address_region_id %>
<%= form.collection_select :address_region_id,
Address::Region.all, :id, :name,
- { prompt: 'Please select region' },
+ { prompt: 'Please select region' }, class: 'select2',
data: { location_target: 'selectedRegionId', action: 'change->location#fetchProvinces' } %>
</div>
<div>
<%= form.label :address_province_id %>
<%= form.collection_select :address_province_id,
[], nil, nil,
- { prompt: 'Please select province' },
+ { prompt: 'Please select province' }, class: 'select2',
data: { location_target: 'selectProvinceId' } %>
</div>
<%= form.submit %>
<% end %>
Now we successfully implemented the select2 in our application.