Looking for good (web) UI patterns for multi-select from a large (100+) list.

Question

We have an application where we are recording a one to many mapping of values, with the 'many' side containing 100+ options. A simple select list isn't going to work because ctrl+click is a little too fragile for this user community. This will be done in ASP.NET, so any pointers to existing controls for this purpose would be very much appreciated.

The two main contenders are:

• scrolling checklist - Keep about 10 options visible and let the user scroll up and down to check the options they want

• available vs. selected lists - Two adjacent lists, available options on the left, selected options on the right, with some buttons to move items back and forth. (Any ASP controls for this one?)

Any other ideas come to mind?

Thanks!

Answer 1

What about a suggestion-box, so that they can start typing and you'll show possible options depending on what they are typing?

You could display the whole list on a tag-cloud so that if they want they can pick tags and the suggestionbox will be auto-populated with whatever they pick.

If the suggestion box is not viable - I'd go with the tag cloud and a disabled text-box (or any other non-editable text field, even a label) to show the options picked from the tag-cloud.

This could also save you a big deal of vertical space compared to traditional lists.

Answer 2

After re-reading your question, I would go with two list boxes with buttons for adding and removing the selected items.

If your one-to-many options go deeper into many sub-levels, how about an ASP.NET TreeView control? You can add a checkbox for each leaf node in a TreeView, and possibly a checkbox at the parent node which, when checked, selects all child nodes.

Answer 3

When you have 100+ list (it can be 100000+) it's hard to find specified items with suggestion-box. I try it and users was disoriented. List contains 100+ and more should have some filters to precise result to pick and select item.

I think grid with filters and box with selected items and Add/Remove option will be best for this scenario.

but

I'm still looking for fine UI design for this.