Thousands of items in multiple dropdown menus

How about a simple jQuery Autocomplete solution?

I've done such a thing, also with several thousands of entries. The problems:

• it's difficult for the end user to navigate trough the list if there are hundreds of cities to choose

• dropdowns as they are terrible for such things

• querying a database to obtain info is stressful because the query is basically the same, with same results, nearly never-changing.

So on to solutions:

• I still stood by dropdowns, but I added (trough UI) options for users to filter the list a bit. I won't post the code or the layout, if you are fine with the dropdowns as they are - keep them.

• I loaded all of the countries, cities and areas via JS once. Now, why - first off, it wasn't that huge of a deal, it was about 20ish kilobytes gzipped if I'm not mistaken. I didn't want the "please choose a country" > "please wait, loading cities" > "choose a city" > "please wait, loading areas" > "choose an area" thing, I absolutely hate waiting so I don't want anyone to wait if they don't have to :)So, the whole structure is loaded at once (when page is requested) and kept inside an object. If the browser supports sessionStorage, I check whether I have the object there in the first place - if not, I load it via jQuery's $.ajax call.On the web server, the script returning JSON object actually loads the data from Memcache. If there's no entry in the Memcache, then I query the db and load all the data and I store it with Memcache for later use.

Now, what happens is that I've got a JS object representing all countries, cities and areas - with relations, meaning I can render the dropdowns in any way I need to, showing only relevant cities for current country selection.

Now, as you have similar structure - you can apply the same logic.Load the item when the page loads, but check if you have sessionStorage available. If yes, check if you got object there. No? Do a $.ajax call and obtain it. When dropdowns fire change event, render the appropriate data.

Hopefully this helps a little, I'm typing this in a rush :)

A few responses:

• This is a good use of AJAX, no need to look for another method. You wouldn't want to force the client to pre-load all of the javascript arrays for the possible state/city/theater combinations...
• jQuery Autocomplete is a good tool to use to implement the UI
• The list of cities and states can be obtained from GeoNames
• How long it would take to implement depends on the skill of the implementer ;)