Using Harvest Chosen select with ActiveAdmin
By Nic Boie, November 28, 2017
One of the biggest pain points in ActiveAdmin is the large single and multi-selects that come into play with models having relationships. When the list of possible selections for a relationship grow too large, the list becomes completely unwieldy, and the user is left to dig through a long list of what often seems like irrelevant information.
To resolve this issue, we’ve made heavy use of Harvest’s Chosen jQuery plugin (https://harvesthq.github.io/chosen/). Chosen is a fantastic tool, and we’re happy to share how we use it with another one of our favorite tools, ActiveAdmin.
Here are the steps for adding Chosen to ActiveAdmin:
- Include the Chosen assets (JS, CSS, and icon sets) in your application.
- Tell ActiveAdmin to load these assets (see application.js and application.css).
- Attach Chosen to the element selector of your choice. (We use .chosen-select.)
- Apply Chosen to your ActiveAdmin resources (`f.input :user, as: :select, input_html: { class: ‘chosen-select’ }`).
There are a few other pieces you may find handy for using Chosen in ActiveAdmin. You can add the `multiple: true` input option to allow the Chosen multi-select to take over for the very clunky cmd+click multiple selection, and you can allow blank selection with the `allow_blank: true` input option. These are features of ActiveAdmin’s underlying Formtastic gem, but Chosen knows how to deal with them.
If you’re interested in trying out these tips, I’ve created a sample app using Chosen for a single-select here: (https://github.com/boie0025/activeadmin-chosen-example)
While ActiveAdmin is a powerful tool, the way that it handles single- and multi-selects can quickly become unmanageable. Chosen provides a much sleeker method for handling select options.
If you’re interested in learning more about Chosen or looking for a better administration interface, drop us a quick note! We’d love to hear more about your project and the unique challenges you’re facing.
