Results of combobox selection

Question

Combo box is relatively easy to pick items from, but is less usable when it comes to see what you have already selected. Any recommendation on how to display results of the combo box selection? The goal is that it is easy for the user to see what has been selected at a glance without scrolling and also easy to make changes to the selection. (added later) Just found a good read about related topic about advantages and disadvantages of different multiple selection approaches http://www.ryancramer.com/journal/entries/select_multiple/

A couple of options I have so far:

I am not a huge fan of the option below, because it takes multiple clicks to select things and there are more controls which creates more cognitive load.

I could also consider have "view only" and "editable" modes but that would mean more coding so I am looking for some other ways.

Answer 1

While there are a few different ways to do what your asking; I prefer the "free tag" input method (not sure if there is a better name for this component). Basically users are allowed to enter in terms/tags/values into an makeshift input. Suggested/autocompleted terms terms/tags appear to the user as they type. As terms are completed/selected they appear in there own mini containers that also allow for single click removal.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Working example plugin can be found here: TextExt. Hope this helps!

Answer 2

The Chosen javascript plugin may be exactly what you're after. It compiles all previous selections in a nice stack while letting you continue to make selections.

Answer 3

Your first option is fine, except I'd list the selected items horizontally under the combo. This doesn't mess up your layout as much as the vertical list.

The solutions that put the selected items within the visible row do not scale beyond two or three very short items, not to mention long ones. They also don't let you easily remove your items, because you can't really to the X button thing. You need a click on the box to expand the box, so you won't be dividing it into several regions where clicking on some expands the box and clicking on others removes the item. The X thing works well outside the box itself.

^{download bmml source – Wireframes created with Balsamiq Mockups}

BTW, just to observe terminology - a combo box isn't one where you can select a combination of items, it's any dropdown in which you can also type. I'm not sure what the proper name of a checkbox dropdown is.

Answer 4

I upvoted @JeggH's answer.

Though when the list of available items is not too long, this as another approach: