Displaying selections from a Dropdown Check List

Question

First of all, I apologize for my Englsih and will try to be as clear as possible!

I'm currently having a problem with a Dropdown Check List.

I have, on the left of the search results, a Dropdown Check List which manages the different categories (38) displayed. When selected, a category appears in plain text in a field. When the user selects all 38 categories, they appear in plain text but in line and separated with a comma which makes it unclear and very hard to read.

I do not wish to cut the plain text list in the field because the categories are home-made and users are not necessarily familiar with them.

It's also way easier for me to see what has been checked or unchecked in a search. With a short list, the user has to click to display the plain list and know what was checked.

I tried with Harvest's multiple select chosen but the result is the same (too long).

Do you have any solutions?

Answer 1

First of all, your English is really not that bad.

It sounds like Harvest's free selector library may be to your benefit. http://harvesthq.github.com/chosen/

These work much like Facebook's name tagging when composing a message. While it's difficult to say from your description, it sounds like you have two interfaces where only one is needed.

Either that, or a feature like that of the previous link would basically integrate those two interactive elements into a single element.

This may also solve your dilemma because each item in the text box is trivially a comma separated element, but can still be treated like an object. The plugin also updates the dropdown list removing items that have already been selected.

Update

My team has moved to Select2, it's a well-maintained fork of Chosen with more features.

http://ivaynberg.github.io/select2/

Answer 2

Maybe this solution could work for you: (I have seen this structure for Tagging, but could work also for you). Even a search/filter field could be added to the left side panel.

Answer 3

I'm assuming that the use-cases for selection are clustered at the edges, meaning that almost all selections will either be a few categories selected or all categories selected except a few. If this is true, then I would approach the problem like this:

• customize the text shown to the user when the dropdown is not dropped down.
• if only a few are selected, show the selected categories, e,g. "Category 1, Category 2"
• if all are selected, don't list each category. Instead, show text indicating all are selected, e.g. "(all)"
• if almost all are selected, except a few, then show text indicating which ones are not selected, e.g. "(all) except Category, Category 2"
• if there are lots of categories selected, but not so many that almost all are selected, then show the first few categories and then a "summary" item, e.g. "Category 1, Category 2, Category 3, and 18 more".
• make sure there's a tooltip so users who hover over the dropdown checklistbox will see the full list.