Possible UI replacement for selection with hundreds of options?
I'm in the middle of converting an old Access 2003 application to a web application for an internal project, and one of the most common interface elements is select
with a few hundred elements inside them. For example, imagine a grid of gift data provided by donors, where one column is the option to choose which publication (submitted select
) was sent to that particular donor for that particular gift. But in every line the same is select
repeated every time.
I am worried about repeating this pattern (firstly because it is ugly) because of the effects it can have on browser performance and, most of all, because of the delay it can introduce into the UX. How could I replace this paradigm with more modern behavior? I thought, for example, to put <input type="text">
that launches a modal that provides all the possible options.
source to share
Please have a look at the select2.js project on github, looks great in your case.
Select2 provides a custom selectable checkbox with support for search, markup, deleted datasets, infinite scrolling, and many other highly reliable options.
It integrates autocomplete (behaves like <input type="text">
) and is one of the project trend in javascript, hugh community.
source to share
You can have one choice with all parameters and use it in everything. Basically swap the current lines with an actual selection with all options when editing (or possibly hovering over) that line. After you're done editing, you replace select with a dummy selection that only has one option (the selected one).
Voila! No big DOMs or no extreme page loads. Basically this is similar to your suggestion, but it just looks like a plain old heavy page.
source to share