How to use Chosen jQuery library in a Rails application

We will use the gem chosen-rails.

In your `Gemfile` add

1gem 'chosen-rails'

In your `app/assets/javascript/application.js` add

1//= require chosen-jquery

Also verify that you already have jquery.

If you are using Rails version +6 you will need to include application.js from app/assets/javascript/ to you application.html.haml or application.html.erb in app/views/layouts. Like this :

= javascript_include_tag 'application'

In your `app/assets/stylesheets/application.scss` add

1@import 'chosen';

If you have `app/assets/stylesheets/application.css` add instead

1*= require chosen

Create a file chosen.scss in `assets/stylesheets` with the following code

we add this file to make sure we have the css styles for chosen library, sounds like the ones in the gem are not updated. It's also a good thing to do if you want to add custom styles for the autocomplete field.

1@import "chosen-base";
2
3//= depend_on_asset "chosen-sprite.png"
4//= depend_on_asset "chosen-sprite@2x.png"
5
6$chosen-sprite: image-url('chosen-sprite.png') !default;
7$chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
8
9.chosen-container {
10  user-select: none;
11  * {
12    box-sizing: border-box;
13  }
14}
15
16.chosen-container-single {
17  .chosen-single {
18    background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
19  }
20  .chosen-search {
21    background: $chosen-sprite no-repeat 100% -20px;
22  }
23}
24
25.chosen-container .chosen-results {
26  li {
27    &.highlighted {
28      background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
29    }
30  }
31}
32
33.chosen-container-multi {
34  .chosen-choices {
35    background-image: linear-gradient(#eee 1%, #fff 15%);
36  }
37  .chosen-choices li {
38    &.search-choice {
39      background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
40    }
41    &.search-choice-disabled {
42      background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
43    }
44  }
45}
46
47.chosen-container-active {
48  &.chosen-with-drop{
49    .chosen-single {
50      background-image: linear-gradient(#eee 20%, #fff 80%);
51    }
52  }
53}
54
55.chosen-rtl {
56  .chosen-search input[type="text"] {
57    background: $chosen-sprite no-repeat -30px -20px;
58  }
59}
60
61.chosen-select {
62  display: none !important;
63}

How to use it in your views

1.form-group.chosen-select-container{style: "display: none;"}
2    = g.label :user_ids, "Utilisateurs avec role 2 par exemple"
3    = g.select :user_ids, User.where(role: 2).map { |u| [u.full_name, u.id] }, { include_blank: true }, { :multiple => true, class: 'chosen-select', data: { placeholder: "Saisissez le nom ou prénom" } }

For this part of the code:

1User.where(role: 2).map { |u| [u.full_name, u.id] }

It’s better to put it inside a method in a helper like app/helpers/application_helper.rb and then call it in your views.

Inside the view file under a `:javascript` tag add

1$('.chosen-select').chosen({
2    allow_single_deselect: true,
3    no_results_text: 'No results matched',
4    width: '100%'
5});

maybe add this js code in your application.js if you are going to use this chosen-select in a lot of views.

How to use Chosen jQuery library in a Rails application

In your `Gemfile` add

In your `app/assets/javascript/application.js` add

In your `app/assets/stylesheets/application.scss` add

If you have `app/assets/stylesheets/application.css` add instead

Create a file chosen.scss in `assets/stylesheets` with the following code

How to use it in your views

Inside the view file under a `:javascript` tag add

More articles from Naoufal The Tech Lead

A Ruby On Rails Active Storage Cheatsheet

Deno 1.0 What ? NodeJS is dead ? are you serious ?

In your Gemfile add

In your app/assets/javascript/application.js add

In your app/assets/stylesheets/application.scss add

If you have app/assets/stylesheets/application.css add instead

Create a file chosen.scss in assets/stylesheets with the following code

How to use it in your views

Inside the view file under a :javascript tag add

More articles from Naoufal The Tech Lead

A Ruby On Rails Active Storage Cheatsheet

Deno 1.0 What ? NodeJS is dead ? are you serious ?

In your `Gemfile` add

In your `app/assets/javascript/application.js` add

In your `app/assets/stylesheets/application.scss` add

If you have `app/assets/stylesheets/application.css` add instead

Create a file chosen.scss in `assets/stylesheets` with the following code

Inside the view file under a `:javascript` tag add