Chosen, a Select Box Enhancement Plug-in for jQuery and Prototype

In May, we released our improved detailed time reports, which included an improved interface for filtering the data included in your report. The filters are such a significant improvement over regular HTML select boxes that we’ve decided to share their code with the world. Today, we’re releasing them as a plug-in we’re calling Chosen (available for jQuery and Prototype).

When building an HTML form, select boxes are often used to present a long list of options because they don’t take up a lot of space. Once a select element includes more than a handful of options, however, they become difficult for a user to navigate. Typing into a field doesn’t always work in an expected way (and many users aren’t even aware of this option) and scrolling through dozens or hundreds of choices is slow and tedious. These problems are especially magnified when the order of options isn’t immediately clear.

Chosen aims to improve select boxes by adding search-based filtering. When a user clicks into a Chosen element, their cursor is placed in a search field. As the user types, options that don’t match the search terms are hidden, leaving only useful results behind. Users can select their choice just the same as a standard select element – highlight and click with the mouse or use the keyboard to navigate choices (up and down arrows change the highlight and enter selects).

Additionally, multiple select elements get an improved interface for displaying selected options. User-selected options are displayed as boxes at the top of the element and are always visible. They can be removed with a single click or using backspace.

Working With Chosen

For developers, using Chosen is easy as can be. Chosen works by progressively enhancing a standard HTML select element, so no backend changes need to be made to handle passed data. Options selected via a Chosen field will change the (now hidden) HTML field and data will be passed on form submit in a normal fashion.

We wrote Chosen in CoffeeScript, which provides a much more readable syntax for writing javascript. Since CoffeeScript makes maintaining framework-independent, object oriented javascript much easier, we were able to use much of the same code as a base for both our jQuery and Prototype versions of the plug-in. When you grab the source for Chosen, you will also get the CoffeeScript version.

Want to give it a try? Check out the project page or grab the source on github.

Open source, FTW

Harvest relies on the contributions of the open source software community on a daily basis and we are excited to give back. We maintain a number of open source projects and plan to continue adding to that collection. We encourage you to clone, fork and contribute to Chosen or any of our projects.

If working with a great development team and sharing work with the world sounds like your cup of tea, why don’t you join us? We’re looking for a few great developers.

10 Comments so far
  • charlie arehart July 19, 2011

    This is indeed nice, and thanks for sharing it. I’ll say that I struggled at first with the multiple select demo. I could see how to add one, obviously. But it wasn’t apparent (until I read the details above) how to add a second (merely by typing).

    I wonder if (until it becomes a common paradigm) if it may do for users (or the tool itself) to help folks know that they can add another after adding the first.

  • I made a very basic helper plugin for CakePHP. Will definatly improve upon it to support either Prototype or JQuery engines that can be configured in CakePHP, but for now it supports JQuery.

    https://github.com/paulredmond/chosen-cakephp

  • Raphael August 18, 2011

    This is a really helpful plugin !
    I wonder though, is there already implemented functionality for jQuery Autocomplete / AJAX populating and custom formatted autocomplete fields, or custom serializing functionality and formatting (say count badges for list items etc.) ?
    I am now using a custom version of Alicia’s Tagify (https://github.com/alicial/jQuery.Tagify) which was really helpful, but I really like the design of your control and the choice of your html skeletton. Would be nice if you could maybe include some functionality like that, or document some of the more internal functions which aren’t that obvious when scanning the code ? Thank’s so far !

  • Awesome contribution! Thanks for taking on a design/interaction that has eluded so many. BTW, the gang at YayQuery (http://yayquery.com) – Episode 23, dubbed it Plug-In of the Quarter.
    Whoo-eee. You are setting the bar high!

  • Thanks for the feedback, everybody. @kevin, that’s really fun news!

    We’re excited about Chosen and the energetic discussion that has sprung up around it. Please report any future issues on the Chosen GitHub issues page: https://github.com/harvesthq/chosen/issues

  • Has anyone tried to dynamically populate a Chosen multi-select based off of another select box?

    I have two select boxes. The first one is a standard select the second is a Chosen multi select box. Based off of the option selected in the first box i’m trying to auto populate the second box. This works when I remove the Chosen class but not with the Chosen class.

    Thanks in advanced!

  • Jennifer,

    The Issues section on GitHub is a great place to look for answers and ask questions. The answer to your question is handled in this ticket:

    https://github.com/harvesthq/chosen/issues/225

    Essentially, you’ll need to trigger the “liszt:updated” event on the second select box _after_ you’ve updated it.

    Good luck!

  • Fantastic plugin!

    If I create a Select element with the “multiple” option and use “serializeArray” I only ever get one value back. How can I get multiples?

    Cheers!

  • James, serializeArray() requires all form fields to have a name attribute set. If you have that set, it should pick up multiple values without issue. If you’re still having problems, please open an issue at the Github page for Chosen — the community there is very helpful!

  • Thanks for the great feedback, everyone. We’re going to shut down comments on this thread and point you at the Chosen issues section on GitHub. That will be the place to reach us if you’re having a technical problem, have a feature request or just have general comments.

    Chosen has a strong community of interested parties on GitHub and the best way to make the plug-in better is to participate!

    https://github.com/harvesthq/chosen/issues/225

Comments have been closed.
The HARVEST Blog News & small business tips from your beloved time tracking & invoicing app.