Thousands of items in multiple dropdown menus

A client has given me a task to do that I've not done before, and so I'm looking for the best way to do it. They have a form they want users to fill in, but for one field, they want an option of thousands to be placed into three dropdown menus.

For example:

So a user will only be able to choose a Venue once they've chosen a City, only a City once they'd chosen a State. (A nice way to break up the thousands of options.)

I suppose I could this quite easily using POSTBACKs and a simple database, but I imagine that doing something with AJAX and a simple database would be the slicker solution.

Are there any other开发者_开发知识库 ways that this problem might be tackled? If not, does anyone have any links to tutorials or code snippets I could grab? Secondly, how long do you think it would take you to implement such a system?

I've never done this before so I'm hoping to avoid as many unforeseen pitfalls as possible. Thanks.

---

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 ;)

---

Somewhat working example: http://jsfiddle.net/rA9gU/36/

Hope this might help

UPDATE: Added the NO theater found near you option

http://jsfiddle.net/rA9gU/39/

---

You've got it. On the "on change" event for each dropdown, run an AJAX request for the options for the next dropdown.

With jQuery it's pretty simple.

$(document).ready(function () {
    $("#state").change(function () {
        // AJAX call w/ $.get or $.post to a script to return and set city options
    });    

    // Same for city to retrieve cinema options
    ....
});

jQuery is by no means a requirement -- just wraps things up nicely and in cross-browser fashion.

Be happy to provide a more specific example if you like.