Multiple select boxes with Chosen jQuery
After long hours of sweat and frustration, I finally got the multiple select box to work with the Chosen plugin. It seems other people are having some trouble as well, so I will lay out the steps I followed:
Get the form working
First, I recommend getting the multiple select box to work without Chosen first. It should be fully functional, but without the cool JS effect that Chosen will provide. For reference, it should look like this (second row, left side).
In my app I have two models, Company and Market, which are related to one another through a has_and_belongs_to_many association. In the new Company form, I want to be able to pick one or more markets for a given company. (I will assume here that all the models, migrations and join table have been properly set up.)
If you are using a gem like ‘simple_form’, creating the form should be a piece of cake. With ‘simple_form’, all it takes is one line inside your company form:
<%= f.association :markets %>
Just pass in the model name (plural if has_many). The gem will locate the HABTM association and create a multiple select form.
If you are not using a gem, it’s a bit tricker, but should work as well:
<div class=”field”>
<%= f.label :market_ids, ‘Markets’ %><br />
<%= f.collection_select :market_ids, Market.order(:name), :id, :name, {}, {multiple: true} %>
</div>
Notice the ‘multiple: true’ option that needs to be included to make the select box accept multiple items.
Whether you used a gem or not, the form should now be working. Make sure you test it by creating a few new records before moving to the next step.
Add Chosen
For simple integration, I used the ‘chosen-rails’ gem. After you add it to your Gemfile and run bundle, you need to add a few lines of code.
In ‘app/assets/javascripts/application.js’, add:
//= require chosen-jquery
In ‘app/assets/stylesheets/application.css’, add:
*= require chosen
Once the gem is installed, we need to add the JS (or rather CoffeeScript) code. Inside the ‘app/assets/javascripts’ folder, I created a ‘companies.js.coffee’ file with:
jQuery ->
$(‘#company_market_ids’).chosen()
Notice that the selector must have this name, since it is the default id created by the form. It includes the name of the current model (company) and the object ids of the select box options (market_ids). If you want to use a different selector, you will need to change the default name that is generated by the form.
Bingo! The select box should be working properly with the Chosen plugin magic, just like this (second row, right side).
(If you get a “couldn’t find file ‘chosen’” error message, try restarting the rails server.)
Extra configs
There are few handy configurations you can do.
If you want to change the default style, simple add a ‘app/assets/stylesheets/companies.css.scss’ file and use the same CSS id selector. For example, we can increase the field width with:
#company_market_ids { width: 400px; }
If you wish to change the placeholder (text inside the select box), you can include this option in your field generator (form view file):
<%= f.association :markets, :input_html => {:class => “chzn-select”, ”data-placeholder” => “Select one or more markets”} %>
For more options, check out the Chosen and simple_form websites.
I hope this was helpful. If there are other interesting ways to use Chosen, feel free to add comments.
