loading...
Cover image for Rails 6, Stimulus and Select2
Main Street

Rails 6, Stimulus and Select2

ronakabhattrz profile image Ronak Bhatt ・1 min read

This is just a quicky, to help out anyone using Rails 6, or any Stimulus-enabled Rails project and Select2, the amazing jQuery plugin for better select boxes.

add select2 & select2-bootstrap-theme package in web-pack
yarn add select2
yarn add select2-bootstrap-theme
Simple Select2 + Stimulus Controller

select2_controller.js

import { Controller } from "stimulus"
import $ from 'jquery';

require("select2/dist/css/select2")
require("select2-bootstrap-theme/dist/select2-bootstrap")

import Select2 from "select2"

export default class extends Controller {
  connect() {
    $('.content-search').select2();
  }
}
Replace f.select dropdown according to select2 specifications
<div class="form-group" data-controller='select2'>
  <%= f.select :user_id, User.all.map { |user| user.name }, {include_blank: false, required: true, include_hidden: false}, class: 'form-control content-search' %>
</div>

I hope that helps someone. Thanks :).

Posted on by:

ronakabhattrz profile

Ronak Bhatt

@ronakabhattrz

A software engineer with solid experience mostly with Ruby on rails and Javascripts.

Main Street

Building a platform to provide training, support, and resources you need to start and grow your own home-services company.

Discussion

markdown guide