[Ruby on Rails] Select2 introduction memo for Webpacker

Introducing jQuery

You need jQuery to use select2.

How to install jQuery

Introduced select2

terminal


yarn add select2

app/javascript/packs/application.js


import 'select2'
import 'select2/dist/css/select2.css'

document.addEventListener('turbolinks:load', () => {
  $('.js-select').select2({
    placeholder: 'Select an option',
    allowClear: true
  })
})

Customized style

sass


$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

You have now introduced select2 to your Ruby on Rails application. selectTo the tagjs-selectIt should work if you attach a class.

Recommended Posts

[Ruby on Rails] Select2 introduction memo for Webpacker
Ruby on Rails 6.0 environment construction memo
[Ruby on Rails] Introduction of initial data
Ruby on Rails6 Practical Guide cp13 ~ cp15 [Memo]
[Ruby on Rails] About bundler (for beginners)
Ruby on Rails6 Practical Guide cp7 ~ cp9 [Memo]
Ruby on Rails6 Practical Guide cp4 ~ cp6 [Memo]
Explanation of Ruby on rails for beginners ①
Ruby on Rails6 Practical Guide cp10 ~ cp12 [Memo]
Ruby on Rails6 Practical Guide cp16 ~ cp18 [Memo]
Validation settings for Ruby on Rails login function
Ruby on Rails6 Practical Guide [Extensions] cp7 ~ cp9 [Memo]
[Ruby on Rails] Until the introduction of RSpec
Ruby on Rails6 Practical Guide [Extensions] cp10 ~ cp12 [Memo]
Ruby on Rails6 Practical Guide [Extensions] cp3 ~ cp6 [Memo]
[Personal memo] Ruby on Rails environment construction (Windows)
Ruby on Rails Elementary
Ruby on Rails basics
[Rails] Procedure for linking databases with Ruby On Rails
Ruby On Rails Association
[Introduction] Try to create a Ruby on Rails application
[Environment construction Mac] Ruby on Rails (+ Webpacker handles errors)
Explanation of Ruby on rails for beginners ⑥ ~ Creation of validation ~
Explanation of Ruby on rails for beginners ② ~ Creating links ~
Explanation of Ruby on rails for beginners ⑦ ~ Flash implementation ~
Ruby on rails learning record -2020.10.03
Portfolio creation Ruby on Rails
Ruby on rails learning record -2020.10.04
[Ruby on Rails] Debug (binding.pry)
Ruby on rails learning record -2020.10.05
Ruby on rails learning record -2020.10.09
Ruby on Rails config configuration
Ruby on Rails basic learning ①
[Ruby on Rails] about has_secure_password
Ruby on rails learning record-2020.10.07 ②
Commentary on partial! --Ruby on Rails
Ruby on rails learning record-2020.10.07 ①
Cancel Ruby on Rails migration
Ruby on rails learning record -2020.10.06
Ruby on Rails validation summary
Ruby on Rails Basic Memorandum
[Procedure 1 for beginners] Ruby on Rails: Construction of development environment
<Dot installation> Introduction to Ruby on Rails5 Source code comparison
Explanation of Ruby on rails for beginners ③ ~ Creating a database ~
Ruby on Rails Overview (Beginner Summary)
[Ruby on Rails] Read try (: [],: key)
[Ruby on Rails] yarn install --check-files
Ruby on Rails variable, constant summary
Installing Ruby + Rails on Ubuntu 18.04 (rbenv)
[Ruby on Rails] Introduced paging function
Basic knowledge of Ruby on Rails
Progate Ruby on Rails5 Looking Back
How to use Ruby on Rails
[Ruby on Rails] Add / Remove Columns
Ruby on Rails Japanese-English support i18n
(Ruby on Rails6) "Erase" posted content
[Ruby on Rails] CSV output function
[Ruby on Rails] What is Bcrypt?
[Ruby on Rails] Confirmation page creation
Ruby On Rails devise routing conflict
[Ruby on Rails] Comment function implementation