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.
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
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.