CODEWITHSUNDEEP
user-interface
chris
chris

Reputation: 37480

web ui: How to present a large list for multi-select

I'm looking for any examples anyone might have seen of how to effectively present a list of items (about 1500 in total) so that multiple items can be selected.

I've seen a couple of similar questions where the answer suggests an auto-complete, which works to select a single item, but that doesn't allow users to select multiple items.

Any suggestions, or especially pointers to web apps that might have a potential solution, would be most appreciated!

Upvotes: 11

Views: 15419

Answers (5)

Eran Galperin
Eran Galperin

Reputation: 86805

I would create a container div populated with items by typing text in a text input.
The text input performs a basic filter on all the available items.
The items would appear inside the container as selectable elements, and selected items would be transferred to a separate container (as to be able to perform multiple searches).

Upvotes: 1

cregox
cregox

Reputation: 18408

Sorry for being a couple years late... And I hope this helps someone at least.

I'd say either use Eric Hynds's multiselect or a bigger version of it. Ok, maybe this is not the best interface for 1500 items, but maybe it's just right. And it's kind of similar to google's handling, except it has almost no support for keyboard navigation.

It modifies the regular SELECT MULTIPLE, the HTML dropbox, with a very customizable and clickable list which you can filter (and currently) OR group with ease - at this time, filter and grouping don't work together quite well.

If needed, you could use this multiselect and another box showing everything that was selected. You can even just tweak it (look at example #8) to do it so.

Upvotes: 1

lc.
lc.

Reputation: 116528

I'm thinking something along the lines of how Google does it with Gmail.

First off, you can put checkboxes next to each item that the user can select individually. Then put a filter/search box, with the option to select/deselect all matching (add to/subtract from selection). You could also implement autocomplete on the textbox.

Other filtering options (by tag, by date, etc) lend themselves nicely to this method as well. It depends on what kind of items you're trying to list.

You could also arrange the list in a set of sub-lists, if there is some common grouping among the items. Still with the checkboxes, but you can arrange listboxes next to each other (populating children in the next box to the right as users select a parent node to view). Or a simple tree-view might do.

Upvotes: 3

Mattynabib
Mattynabib

Reputation: 263

It's been a while since this was posted, but in the meantime some very good multi-select "tag input" or "pillbox" style options have become available:

https://harvesthq.github.io/chosen/

This is a fantastic solution for many situations - try it out!

Upvotes: 3

TheSmurf
TheSmurf

Reputation: 15568

I can't think of any usable web app I use that shows me 1500 things that I have to choose from.

My suggestion would be to break the list down somehow (for example, as a sequence of smaller choices, which you can then allow multiples on). What you're asking about sounds like a usability nightmare.

Upvotes: 2

Related Questions