Question

I have a webpage that should be relatively lightweight, the problem is that i’ve got a table with editable user data on each line and the data includes a dropdownlist with hundreds of options.

i’ve argued against the use of so much values but i guess i wasn’t able to come up with a satisfying solution; so the ginormous dropdownlist stuck (we’re talking 35kbytes of options per drop down list, here)

It doesn’t mean that the data has got to be there for each drop down list, though, and i’ve been looking for ways to manage that without too much hassle. Currently i’ve been considering:

• Filling the selected drop down list with the data on click
• Creating empty drop down lists and only one full drop down list that i would swap with the selected one when applicable
• Forcing the line to be editable only after a click on an edit command. i’d really like to avoid this one since i think we should minimize the number of clicks for the user
• Creating a fillable field with a smaller drop down list attached. User could either type their word and select the nearest match or directly select from the shorter list

I’m trying to keep the lists as empty as possible because the table should be wrapped by an eventual jquery plugin that would render it sortable, and swapping 35k of data per line on each column click is expensive.

Do you have any recommendations regarding a way to avoid this repetition of data? Do you think i should really push for the cleanup of this data? Any good practice or pattern to address this specific problem?
I’m considering any answer here, so don’t hesitate to suggest a jquery plugin, or a cache solution on the client, or whatever may help alleviate my data bloat…

---

Edit: a autocomplete field is a good answer, but if one finds a way to do it in a mouse-driven way, don’t hesitate to tell me

Answer 1

A perfect candidate for an autocomplete lookup.