Autocomplete using Chosen in Rails Active_admin

In one of my recent projects, I needed to implement autocomplete in the active_admin interface to select one or more users from the user list. I researched this and settled on the library Chosen. Chosen supports multiple select and selected state by default. Chosen is available as a gem for Ruby on Rails, which integrates well with the Asset Pipeline.

Include Chosen gem in your Gemfile:

gem 'chosen-rails'

Once the gem is installed, include the Chosen JavaScript assets in your JS file:

//= require chosen-jquery

In /app/admin/modelname.rb:

ActiveAdmin.register Modlename do
  # Customize creates and edit form
  form do |f|
    f.inputs do
       f.input :name
       f.input :othermodel, :input_html => { :class => "chosen-input" } # other model with has_many relationship
    end
    f.buttons
  end
end

In active_admin.js:

$(document).ready(function () {
  $('.chosen-input').chosen()
})

If you are using CoffeeScript instead of JS, then use this:

$ ->
  # enable chosen js
  $('.chosen-input').chosen
    allow_single_deselect: true
    no_results_text: 'No results matched'

Then, include Chosen stylesheet assets to your css file:

*= require chosen

For more details, check here.

That's it! You will have a nice autocomplete with multiselect. Happy coding!

Comments