Take the 2-minute tour ×

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:

enter image description here

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.

share|improve this question
From a usability perspective, it'd be best to make it a text field 'enter zip code, city and/or venue' and have smart filtering on the back end. –  DA. May 19 '11 at 20:07
Seconding this. Entering a zipcode is the fastest way of picking a city/state combination. –  Andrew May 19 '11 at 20:25
Unfortunately that's not an option in this case. I have no "zipcode" information, and neither does the client, and there's no easy way of getting it. The client isn't going to be happy if I ask them to go away and collate a ton of information for me, either. –  Chuck May 19 '11 at 20:31

5 Answers 5

up vote 3 down vote accepted

How about a simple jQuery Autocomplete solution?

share|improve this answer
Looks very nice indeed. I've already used Prototype on the page, but I guess it wouldn't be too bad to lose the Scriptaculous functionality I've already added for other fields to use JQuery instead. Also, I'm guessing I wouldn't include the 100K of venue names on the page, though. Where would they be coming from? –  Chuck May 19 '11 at 20:07
If you are using Scriptaculous, just stick to its own Autocompleter: madrobby.github.com/scriptaculous/ajax-autocompleter –  naivists May 20 '11 at 3:59
Ah! Fantastic. Thanks for alerting me to that. –  Chuck May 20 '11 at 12:47

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

share|improve this answer
That's very helpful. Thanks. I'll re-read and digest it. –  Chuck May 19 '11 at 20:28

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 ;)
share|improve this answer
Thanks for your comments, they're very helpful. I already have all the data, and it's quite specific, so I best stick with it instead of using GeoNames. Also, I'd like to know how long you think it would take YOU to implement it :) –  Chuck May 19 '11 at 20:05
Just the three drop-downs working via AJAX, I would guess 1-2 hours, including testing. It depends on how many emails I get during that time :) –  AJ. May 19 '11 at 20:08
Would that include setting up all the data? At the moment all I have is an excel spreadsheet... And the existing HTML/CSS for the form. That's it! –  Chuck May 19 '11 at 20:14
As you peel back the onion, the layers of the problem seem endless. Yes, I still think if I had to 1. create the database, 2. import the data from Excel, 3. write the AJAX controller to perform queries, 4. write the UI....I could get it done in under 2 hours. The trade-off on using a 3rd party service for the city/state data is not significant if you still have to implement server-side database/code for retrieving the list of theaters. –  AJ. May 19 '11 at 20:21
Wow, that's fast. Thanks. –  Chuck May 19 '11 at 20:26

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

Hope this might help

UPDATE: Added the NO theater found near you option


share|improve this answer
Holy crap, that's a fantastic start. Thank you! –  Chuck May 19 '11 at 22:38
Adding another option, Select State 50, Select the last city –  Phill Pafford May 20 '11 at 14:19

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.

share|improve this answer
Thanks, that's very helpful. I'm wondering where the data for all of this is stored... (The venue names equal about 100K in text on their own.) In an SQL database, or what? Thanks! –  Chuck May 19 '11 at 20:12
That would be the ideal if you can get 'em in one. PHP can certainly parse raw text files, but if you can figure out a way to import the list and maintain it in data, it'll be easier all around. Then, in the script you call with JS (call it "get_cities.php" for example), you'd just query the cities table with the selected state, build a list of options, and output them, which could then be manipulated in the return to your JS call. –  JFitzDela May 19 '11 at 20:20
Very useful information, thank you! –  Chuck May 19 '11 at 20:29

Your Answer


