Select dropdown element with 1 million options, ahem...dependent too

Question

Say we have three dependent select dropdowns (selecting parent asynchronously populates the child via a database query):

DD1: [People of this world]
    DD2: [Hair Strands]
        DD3: [Keratin Molecules]

Ok, our options' lists won't be as large as what the names here imply, but each dropdown is going to house about 1 million option items. The other day we tried loading about 20,000 options items (via ajax) into a child dropdown, and the UI froze and things went wrong.

Any strategies?

(We're on Spring MVC/JSTL + Tiles/DB2/EXTJS).

Answer 1

Umm, isn't the point of hierarchical organisation of stuff to make the number of choices at each level manageable ? So isn't one solution a deeper hierarchy ? I suspect that you may still have problems with technology conceived for handfuls of options.

Answer 2

You need to find a better way of doing this. Not because it's technically hard (it is) but because your users will track you down and beat you to death if they have to scroll through a drop-down list containig a million items.

As examples, people in the world can be separated alphabetically (six billion people separated based on the first five characters will give you 500 items on average per group) or by geographical region.

Keratin molecules I don't know about but I'mm pretty sure from what I remember of my high school chemistry that it was full of hierarchies.