Skip to content
Integrate Chosen javascript library with Rails asset pipeline
Find file
Pull request Compare This branch is 3 commits ahead, 49 commits behind tsechingho:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Chosen for rails asset pipeline

Chosen is a library for making long, unwieldy select boxes more user friendly.

The chosen-rails gem integrates the Chosen with the Rails asset pipeline.


Install chosen-rails gem

Include chosen-rails in Gemefile

gem 'chosen-rails'

For Rails 4 project, it is required to add compass-rails gem explicitly and use unofficial branch for compatible issue.

# gem 'compass-rails', github: 'Compass/compass-rails', branch: 'rails4'
gem 'compass-rails', github: 'milgner/compass-rails', branch: 'rails4'

Then run bundle install

Include chosen javascript assets

Add to your app/assets/javascripts/application.js if use with jQuery

//= require chosen-jquery

Or with Prototype

//= require chosen-prototype

Include chosen stylesheet assets

Add to your app/assets/stylesheets/application.css

*= require chosen

Enable chosen javascript by specific css class

Add to one coffee script file, like

$ ->
  # enable chosen js
    allow_single_deselect: true
    no_results_text: 'No results matched'
    width: '200px'

Notice: width option is required since Chosen 0.9.15.

And this file must be included in application.js

//= require chosen-jquery
//= require scaffold

Also add the class to your form field

<%= :author, { |u| [,] },
  { include_blank: true },
  { class: 'chosen-select' }

If you use simple form as form builder

<%= f.association :author,
  collection: User.all,
  include_blank: true,
  input_html: { class: 'chosen-select' }


Since version 0.13.0, non-digested assets of chosen-rails will simply be copied from digested assets.

Gem maintenance

Maintain chosen-rails gem with Rake commands.

Update origin chosen source files.

rake update-chosen

Publish gem.

rake release


use MIT license.

Something went wrong with that request. Please try again.