Naoufal The Tech LeadNavigate back to the homepage

How to use Chosen jQuery library in a Rails application

Naoufal El hassnaoui
June 10th, 2020 · 1 min read

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.

More articles from Naoufal The Tech Lead

A Ruby On Rails Active Storage Cheatsheet

Rails Active Storage cheatsheet: a bench of code snippets to get you started using Active Storage.

June 7th, 2020 · 1 min read

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

Two years ago the creator of NodeJS Ryan Dahl announced Deno a secure runtime for JavaScript and TypeScript, in this talk where he talked…

June 7th, 2020 · 1 min read
© 2020 Naoufal The Tech Lead
Link to $https://twitter.com/Naoufal_ELHLink to $https://www.linkedin.com/in/naoufalelh/Link to $https://dev.to/naoufalelh