Many Harvest customers have long lists of clients, projects, tasks, or other they need to sift through when trying to start a timer, run a report, create an invoice, or whatever else they’re trying to do in the product. However, really long select boxes are unfortunately rather unwieldy and not very user-friendly.
When we were revamping our reports in 2011, Patrick Filler, an engineer (and friend) at Harvest, came up with an idea. Could we behind-the-scenes continue to code these as regular HTML select boxes, then leverage javascript to progressively enhance the user experience? The answer was yes.
He built Chosen originally as a jQuery plugin, and over the years it’s since been ported to other libraries. I paired with him on the initial design and the CSS, and continued to help maintain it over the years.
Chosen comes in two flavors: Standard Select and Multiple Select.
- Standard Chosen enhances the HTML
<select>element. It primarily adds a more visible search function, with highlighted results. - Multiple Chosen enhances the HTML
<select multiple>element. It not only adds a more visible search function, but also always displays which items you’ve selected, even if they’re scrolled out of view.
For the initial design of Chosen (above), I stuck with neutral styling in an attempt to balance looking good whether viewed on a Mac and Windows computer. However, we did “modernize” the design a few years later:
You can try Chosen for yourself at its library demonstration page. Or you can watch this ruby installation demo by David Kimura:
Chosen is now deprecated and no longer under active development, but the idea and concept lives on. It’s been forked into Select2 and the concept adopted by many other libraries and plugins.