Chosen is a jQuery plugin that converts long select boxes into a more user friendly form element. The plugin adds auto-complete functionality to select boxes, and this makes it easier for users to navigate through long select lists. Go to the Chosen homepage to see it in action.
In this article, we’ll look at the Chosen Drupal module which integrates the jQuery plugin with Drupal.
Getting Started
Before we begin, download the Chosen plugin directly from GitHub and extract the zip file into sites/all/libraries. Once the plugin has been extracted the path should be sites/all/libraries/chosen.
Finally, download and install Chosen and Libraries API module. For this article, I’ll be using the 7.x-2.0-alpha1 release of Chosen.
Configuring Chosen
Chosen works pretty well out of the box. The module has a configuration page, go to Configuration -> Chosen (admin/config/user-interface/chosen) to view the page.
The most important configuration to take note of is the “Apply Chosen to the following elements” text area. Using the text area, you can control which element will be taken over by Chosen. We’ll leave everything as default.
Chosen Plugin in Action
For this article, I added a bunch of Drupal module names into a “Tags” vocabulary and then created a simple view listing that filters content by a taxonomy term.
This is what the filter looks like when you set the filter operator to “Is one of”. Meaning a user can only filter by selecting a single tag:
Now if we switch the filter and allow multiple selections, this is what the filter looks like:
Chosen on Mobile
We have seen how Chosen works within a desktop browser, let’s now load up the same views listing page on a mobile device. For this very basic test I used the iOS Simulator that comes with Xcode on OSX 10.8.
Here is what a single selection select box looks like.
The same select box but this time it allows multiple selections.
If you have any questions, please leave a comment.
I Love Chosen. For those who feel Chosen is still not funky enough have a look at
Select with Style.
Of cource nice plugin. But with IE7 something is wrong. Not fully supported.
Thanks for the tip.
Thanks for the link.
It’s worth noting that Chosen is part of Commerce Kickstart 2 (https://commerceguys.com/product/commerce-kickstart) includes Chosen!
Chosen 7.x-1.0, which is Drupal’s “Recommended Resease”, does not work. It breaks Drupal Core by precluding the selection of form elements to manage fields (widgets) for adding new fields. It also conflicts with CSS compression using Performance Caching. I don’t know why this version remains posted as “Recommended”. Anyway, I am about to try the 7.x-2.0-alpha1 version that you suggest, and I had a couple of comments and questions: (1) Your instructions of “Getting Started” seem to be redundant because you mention installing Chosen twice. Is this correct? (2) Why does Chosen have to come from GitHub when the module is available to auto-install directly from Drupal? (3) Are there any uninstall considerations for the old version?
You first need to download the jQuery plugin from GitHub and then download the module which integrates the jQuery plugin with Drupal.
When you say “auto-install” do you mean a Drush Make file? Not everyone uses Drush, so I need to accommodate for those people.
Sorry, I don’t know what you mean by “uninstall considerations”.
Beautiful script but sadly the Drupal module doesn’t work on select boxes that are part of conditional fields.
I have tried 3 other jquery scripts and all either don’t apply to everything or break horribly in mobile.
That’s good to know, thanks.
Hi Ivan Zugec,
It’s pretty good to see on the content field sections, but i can’t able to assign the same “Chosen” on views section like when we add some filter criteria for both user can use this filter in this case how can we assign the dropdown list with “Chosen” here ?
Thanks in advance
Are you having trouble with exposed filters?
Look out for any JS errors and adjust the jQuery selector configuration.