Thousands of items in multiple drop-down menus

Question

The client gave me the task of doing this, which I did not do before, and therefore I am looking for the best way to do this. They have a form that they want users to fill out, but for one field they want thousands to be placed in three drop-down menus.

For instance:

Thus, the user will be able to choose a place only after they have chosen a city, only a city, as soon as they have chosen a state. (A good way to break down thousands of options.)

I suppose I could use POSTBACK and a simple database quite easily, but I believe that doing something with AJAX and a simple database would be a slicker solution.

Are there any other ways to solve this problem? If not, does anyone have any links to tutorials or code snippets that I could capture? Secondly, how long do you think will take to implement such a system?

I have never done this before, so I hope to avoid as many unforeseen traps as possible. Thanks.

Answer 1

What about a simple jQuery autocomplete solution?

Answer 2

I did this, as well as several thousand records. Problems:

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

• drop down lists because they are terrible for such things

• querying the database for information is stressful because the query is basically the same, with the same results that almost never change.

So, to the solutions:

• I was still standing at the dropdowns, but I added (via the UI) options for users to filter the list a bit. I will not publish the code or the layout, if you are ok with the drop-down lists as they are, keep them.

• I downloaded all countries, cities and areas through JS once. Now, why - firstly, the point was not that the deal was huge, it was about 20 kilobytes gzipped, if I'm not mistaken. I didn’t want "please select a country"> "please wait, load the city"> "select a city"> "Wait, load the area"> "select the area", I absolutely hate it, I want someone to wait if they don’t need :) Thus, the whole structure is loaded immediately (when the page is requested) and stored inside the object. If the browser supports sessionStorage , I check to see if I have the object there first - if not, I load it through jQuery $ .ajax call. On the web server, the returned JSON script object actually loads the data from Memcache. If there is no entry in Memcache, I request db and download all the data, and I store it with Memcache for future reference.

Now, what happens, I have a JS object representing all countries, cities and regions - with relationships, that is, I can display the drop-down lists in some way, showing only the relevant cities for the current country selection.

Now, since you have a similar structure, you can apply the same logic. Load the item when the page loads, but check for sessionStorage . If yes, check if you have an object. Not? Make a call to $ .ajax and get it. When the popup windows fire the change event, print the appropriate data.

Hope this helps a little, I type it in a hurry :)

Answer 3

A few answers:

• it good use of AJAX, no need to look for another method. You will not want to force the client to preload all javascript arrays for possible combinations of states / cities / theaters ...
• jQuery Autocomplete is a good user interface tool
• A list of cities and states can be obtained from GeoNames
• How much time is required for implementation depends on the skill of the performer;)

Answer 4

A somewhat working example: http://jsfiddle.net/rA9gU/36/

Hope this helps

UPDATE: added the NO parameter found near you.

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

Answer 5

You have it. In the "on change" event for each drop-down list, run an AJAX request for parameters for the next drop-down list.

With jQuery, this is 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 - it just wraps things beautifully and in a cross browser.

Be happy to provide a more concrete example if you want.