Adding Chosen to a Rails App

Question

I have been looking around and cannot find a good example of implementing Chosen, http://harvesthq.github.com/chosen/ , into a Rails app. I am trying to convert my existing multi-select into a chosen styled multi-select box.

I tried inserting the files manually, copying chosen.jquery.js into my assets/javascripts folder along with adding chosen.css. Also added //= require chosen-jquery to application.js along with the following code

jQuery(function($){
$('.chzn-select').chosen();
})

Also have *= require chosen in application.css.scss

I added :class => "chzn-select" in a collection_select in a form_tag.

Also tried using the 'chosen-rails' gem (here is an example http://choppingbloc.tumblr.com/post/24894460392/multiple-select-boxes-with-chosen-jquery ) but had no luck.

Anything I might be overlooking? The collection_select is working, but it is not styled like Chosen. I am a beginner so if there is anything obvious I may have overlooked, please tell - everything above is what I have done.

Answer 1

Set it up like this

You have to include both the css file and the js file

in you application.css.scss, (because it is sass, do not use /* require)

@import "chosen";

in you application.js

//= require chosen.jquery

You should give your selects a different class or id than

$('.chzn-select').chosen();

because, it might make things messy when you debug the html. Chosen gives classes with this prefix like .chzn-done, .chzn-single, chzn-drop, chzn-search.

If you have a railscasts pro account.

look at this

token-fields-revised

You should really drop the chosen plugin and go for the select2 plugin. It is based on the chosen plugin, but is way better.