Create Amazing Select Boxes with Chosen in Drupal

By: Ivan Zugec
http://webwash.net |   / webwashnet  

Modules:

- Chosen (https://www.drupal.org/project/chosen)
- Libraries API (https://drupal.org/project/libraries)

Transcript:

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 video, 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 `sites/all/libraries/chosen`.

Finally, download and install Chosen and Libraries API module.

Chosen works pretty well out of the box. But let's head over to the configuration page, go to Configuration and Chosen.

The most important field is the "Apply Chosen to the following elements". Here you can control which elements Chosen will be applied on. By default Chosen will be applied to all select elements. But if you want more control over which elements it's applied on, then use this field.

As an example, let's now limit Chosen to a single select element. First change "Minimum number of options" to "aways apply" and click on "Save Configuration".

Click on Content, and what we'll do is only apply Chosen to the "Update options" drop-down list. First, we need to inspect the element and get the ID. The ID for the element is "edit-operation".

Head back to the Chosen configuration page and add "select#edit-operation" into the field and click on Save configuration.

Now, if we go back to Content, Chosen has only be applied to the "Update options" drop-down list. That's how you limit Chosen to a specific element. Now let's head back to the Chosen configuration page. Before we continue add "select:visible" back in.

The "Minimum number of options" select list is another to take note of. By default it's set to 20, what this means is that Chosen will only be applied to an element if it has 20 options or more. You can change it so that Chosen aways applies, or you can choose between 5 or 25.

Next, you can change the minimum width of the widget. By default it's set to 200px.

If you scroll down, you can change the way Chosen searches select options, and you can also change a few strings that are displayed by the element.

Let's now apply Chosen to the Tags field on the Article content type. Go to Content, "Add content" and Article. You can see that the Tags field is a auto-complete widget, we first need to change it over to a select element for Chosen to work.

Go to Structure, "Content types" and "manage fields", and click on Edit. Click on the "Widget type" tab and select "Select list" from the "Widget type" drop-down list and click on Continue.

Now if we head back to the "Create article" page, Chosen should be applied onto the Tags field. You can select an option directly by clicking on the field or you can search options by typing.