Alternatives to huge drop down lists (24,000+ items)

Question

In my admin section, when I edit items, I have to attach each item to a parent item. I have a list of over 24,000 parent items, which are listed alphabetically in a drop down list (a list of music artists).

The edit page that lists all these items in a drop down menu is 2MB, and it lags like crazy for people with old machines, especially in Internet Explorer.

Whats a good alternative to replicate the same function, where I would need to select 1 of these 24,000 artists, without actually having them all pre-loaded into a drop down menu.

Thrombus

Answer 1

Instead of filling a drop list with so many names you could:

1. Create a simple search mechanism where you match the start of a name
2. Make use of categories (if any are available) and multiple combo boxes to narrow selection
3. Same as above, some sort of tree structure with a categorical hierarchy
4. A shortcuts control where there is a link or a button for letter of the alphabet (meta-category)

Of course a lot of this depends on the stack you're implementing e.g. are you using AJAX or jQuery, access to a db/type.

Bowfin

Answer 2

Assuming the person knows what they're looking for you could create a simple auto suggest feature. Checkout http://code.drewwilson.com/entry/autosuggest-jquery-plugin.

Hards

Answer 3

Use jquery (or the like) which have numerous auto-complete dropdowns available. For example:

http://docs.jquery.com/Plugins/Autocomplete

Soothe

Thats what I was thinking too. is there a way to encode the ID into it somehow? because what I liked about the drop down menu, is that there is a value (id) and the actual text (artist name). – Thrombus

Yegor, it depends how you do it. You can always get creative though. For example if the results are returned as an unordered list you can store your id in the list items title tag and then just fetch it on click with something like $(this).attr('title'). – Hards

Answer 4

Assuming the users have some idea of what/who they are looking for (in this case, an artist), I think an auto-complete textbox would be best. This approach would eliminate your initial load issues provide for a clean AJAX-y implementation which users tend to favor these days. Alternatively, since you are dealing with artist names, you might want to include an "alphabet" control which allows the user to reduce the list of artists by first initial (first and/or last). I've seen this done pretty effectively with a hyperlink for each letter. The same approach could be implemented with a dropdown which includes all letters in the alphabet dynamically loads a filtered artist dropdown based on the selection.

Navy