How to install JavaScript library "select2" that makes multiple selections of selectbox fashionable in Rails 6.0
Introduction
Hello everyone! I'm @hiroki_tanaka, the producer of Mayu Sakuma.
The other day, I have introduced select2, a plugin that makes multiple selections of selectbox fashionable in Rails 6.0 series. At that time, I was a little addicted to the difference from the introduction method up to Rails 5 series, so I summarized what I investigated.
Usage environment
- Ruby 2.6.6
- Rails 6.0.2
What is select2
select2 is a JavaScript library that makes the HTML selectbox design fashionable. our official site is here. → select2 It is a plugin that allows you to easily implement not only a single-select selectbox UI but also a multi-select selectbox.
Sample on official website
--Before introducing select2
--Multiple selection pull-down after introducing select2
How to install in Rails 6.0
The introduction of select2 in Rails5 series was introduced using Gem, but from Rails 6.0, Webpacker is used instead of Gem. I would like to introduce the procedure one by one.
- The following page explains the introduction of select2 in Rails 5 in great detail. → [Rails5] Create a select box that allows multiple selections with Select2
1. Introducing the library required for select2 with yarn
Execute the following command to install select2 in your Rails application. At this time, not only select2 but also jQuery (and popper.js) required to install select2 and bootstrap, which is the UI part of select2, will be installed.
$ yarn add jquery
$ yarn add popper.js
$ yarn add bootstrap
$ yarn add select2
2. Set to use jQuery / popper.js on Rails
Set the Rails application webpack / environment.js so that jQuery can be called from any Rails file.
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
//To use jQuery and Bootstrap JS
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js'
})
)
module.exports = environment
Also, add JQuery to the packs / application.js manifest.
app/javascript/packs/application.js
require("jquery")
3. Set up bootstrap to be used on Rails.
Make the following two settings to enable bootstrap to be used in Rails applications.
app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application';
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
4. Set the erb file to use webpacker.
Bootstrap installed in webpacker for all View files of Rails application ・ Set to the original layouts / application.html.erb so that jQuery can be used.
app/views/layouts/application.html.erb
<head>
<%= stylesheet_pack_tag "application", media: "all" %>
<%= javascript_pack_tag 'application' %>
</head>
5. Define selectbox on erb and describe in JS file to use select2.
Define a selectbox that makes multiple selections on the application's erb.
At this time, if select_tag is set to multiple: true as an option, it becomes a selectbox that can be selected multiple times.
Then, write in the JS file corresponding to the erb file so that the corresponding selectbox uses select2.
app/views/test.html.erb
<%= javascript_pack_tag 'test' %>
<%= select_tag('animal', options_for_select([['Dog', 'dog'], ['Cat', 'cat'], ['Bird', 'bird'], ['Ushi', 'cow'], ['Snake', 'snake']]), class: "form-control", multiple: true) %>
app/javascript/packs/test.js
$(function () {
$('#animal').select2();
});
6. Completed! !!
Bonus: Use option of select2
There are various options in select2. → select2 Options These options can be set with jQuery. The following is an example of option settings.
app/javascript/packs/test.js
$(function () {
$('#animal').select2({
width: 'resolve' //Dynamically change the width according to the page size.
theme: "classic" //Change to the classic UI.
debug: true //Output debug messages to the browser console.
});
});
in conclusion
I feel that the introduction of select2 has become easier by using yarn. However, I often don't understand the internal behavior of select2, so I would like to deepen my understanding.
Recommended Posts