The Multi Select Solution

May 26, 2011 — 12 Comments

Harvest, the time tracking and invoicing tool we use, just added a new filter mechanism to their report generator. While I appreciate the additional functionality, I was most impressed with their multi-select combobox. It looks like a normal text field, but once the field has focus you can select any option and it will be added into the field, click again and you can select another option, building up any number of options. The field just gets larger (more rows are added) when you add more options than can be displayed in a single row.

It is equally easy to remove items from the field by clicking the little ‘x’ next to each option.

Does anyone know if there is a JQuery control for this? That would be awesome. A Flex control like this would be nice too, just in case there are any motivated developers reading this (wink, wink)…

Update: Rajesh Rajappan provided a link to the JQuery control: http://loopj.com/jquery-tokeninput/. It has autocomplete with multi selection.

Update again: Harvest released this control called “Chosen’, it is available here: http://harvesthq.github.com/chosen/

12 responses to The Multi Select Solution

  1. 
    Rajesh Rajappan May 26, 2011 at 7:05 am

    You could also try http://loopj.com/jquery-tokeninput/.
    Its an autocomplete with multi selection.

  2. 

    Kinda similar interaction concept, although it is looking quite different

    jQuery UI Multiselect

    http://quasipartikel.at/multiselect/

    • 

      Thanks for sharing the link. Yep, this will do the same thing, but I think the other one will a) take up less space
      b) be easier to use.

  3. 

    A little bit different, but I like that the jQuery tagedit plugin allows for editing existing tag entries.

  4. 

    A very interesting interaction indeed! I was wondering what was your take on the following two aspects of this UI design:
    – Discoverability – It is great once discovered, but it not obvious upfront that this option is available. Although I do think that discovering is not too difficult either, but I would like to know your take at how you would have evaluated this in a design meeting!
    – The addition of long filters adds to the vertical height of the form. Is that something of a concern at all?

    • 

      I think this control has an excellent change of being discovered since the options display as soon as the field has focus. I guess we would have to test it to determine if an additional indicator should be provided (maybe a watermark?).

      For the length of the form- this sure beats a couple of dozen checkboxes on the screen :o)

  5. 

    Now that you have mentioned it, I can picture the plethora of check boxes on the page – so yes, this indeed is more space efficient than the obvious alternative!

  6. 

    Theresa I’d be very curious what you consider the ‘standard’ keyboard control for this widget. I implemented something similar recently using an older jQuery plugin (http://code.drewwilson.com/entry/autosuggest-jquery-plugin) and was doing some major customization to refine the keyboard controls.

    The expected behavior was really unpredictable user to user, and we almost went to the point of adding instructional text.

    Specifically I’m curious what key(s) you would choose to confirm a choice, and as to what happens next (does the dropdown stay open? do you move onto the next field? etc)

  7. 

    Harvest has open sourced their jquery plugin recently:

    http://www.getharvest.com/blog/2011/07/chosen-plug-in/

    ps: I found this post on the “Designing Web Interfaces” blog first and it’s not possible to comment on the post there.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s