Lullabot Ideas

We know stuff. We empower you to know stuff too.

Module Monday: Chosen

Article by Jerad BitnerSeptember 5, 2011 - 9:00am

User-friendly select boxes

For a long time now, Drupal has been using the idea of the "auto-complete" for such things as taxonomy tags, node references, and user references. While convenient in the fact that it's ajaxified and will display relevant options as you begin to type, it's long been a bit of a problem for users who really have no pre-conceived notion of how typical auto-complete form controls work, or for those with slower connections who end up waiting while they stare at a little spinning icon for their results to be returned to them.

Select boxes are a universally recognized form control, and also a valid alternative to each of the field types I described above which typically utilize the auto-complete widget within Drupal. However, for many use cases, the typical select box widget can have a ton of results and become a very long list of options to scroll down through and chose from.

The auto-complete widget was originally created in an attempt to mitigate this UX problem. But I submit to you an attractive alternative to the typical solution this problem: Chosen.

Chosen is a javascript library built by the incredible people who brought you the time tracking software, Harvest. The library is an open-source project on Github and simply seeks to "... [make] long, unwieldy select boxes more user friendly." It can take your typical select box from this:

into this:

We've decided to use this on the new Drupalcon Denver website for choosing the speakers when submitting a session.

The module itself is little more than a configuration screen that allows you to choose the minimum number of options to show when the cursor is first placed within the select box's text field, and what elements to target.

Chosen is currently only available for Drupal 7.x-1.0 (though I'm sure would be a fairly simply backport to 6.x), and it's currently in use on over 50 sites. It has a dependency on the ever-useful Libraries module and is maintained by Arshad Chummun.

If you find this as intriguing a UX change as I do to the typical auto-complete widget, check it out!

Comments

Ilya (not verified) on September 5, 2011 - 9:21am

This is something I have

This is something I have spent ages looking for. Thanks!

Wusel (not verified) on September 5, 2011 - 12:01pm

firewalls

Behind our company-firewall I cannot see your three "new" elements.

It is neccesary to show something to enable the input behind an company-firewall.

Thanks
Wusel

Agnar Ødegård (not verified) on September 5, 2011 - 12:20pm

Isn't this the exact same

Isn't this the exact same functionality as autocomplete deluxe?

http://drupal.org/project/autocomplete_deluxe

Apart from that, this functionality is very useful!

matslats (not verified) on September 5, 2011 - 12:53pm

user_chooser

User Chooser module may be of interest.
It's not so much about the user interface, but about the ability to choose and validate users according to a role, permission or callback. Choice of widget also!
https://drupal.org/project/user_chooser

attiks (not verified) on September 5, 2011 - 3:57pm

select

@agnar, chosen works on select elements, it looks like autocomplete but there's no callback to fetch the data.

Bojhan Soemrs (not verified) on September 5, 2011 - 4:18pm

Core

I would even go as far as saying, this might be up for inclusion in core. Although the JqueryUI library currently lacking a unified approach to this, it is well within our reach to use something like this in core - the usability of the current solutions are terrible compared to any of this.

Mike (not verified) on September 6, 2011 - 3:59am

There is also a a drupal

There is also a a drupal module for http://documentcloud.github.com/visualsearch/ that integrates with Views as an exposed filter plugin. The module is currently in -dev but is usable - http://drupal.org/project/views_visualsearch

Wim Leers (not verified) on September 6, 2011 - 4:30am

Hierarchical Select

And for the more advanced use cases, there's always Hierarchical Select as well :)

Anonymous (not verified) on September 6, 2011 - 6:05am

Any module able to Fields

Any module able to Fields Tagging but in Select list mode & able to a new tag.

Dan Mouyard (not verified) on September 12, 2011 - 10:52am

Accessibility Problems

Unfortunately, not a lot of work has gone into the Chosen plugin to make it accessible.

Check out http://drupal.org/node/1271622