Javascript City/State/Zip Selector.

One of our clients recently needed to implement a search based on a users location.  We were using Drupal 7, location module to implement this but currently this module only allows proximity search based on a zipcode.  We wanted the user to be able to use a select box to select the state, which would then populate the cities in another select box, which would then populate the zip code in order for the location module to do the search.

There are a few solutions that are close to this.  http://jqueryui.com/demos/autocomplete/#remote-jsonp shows how to use jquery ui to do an ajax lookup on the geonames web service.  This would work but I found that the responsiveness of the geonames free service to be slow and inconsistent.  The free service also limits you to 30,000 searches a day or 2,000 an hour.  This is a lot for a small application but is still just another dependency that I would rather do without.

I found a free database of city zipcodes here: http://federalgovernmentzipcodes.us/ and parsed it with a ruby script to produce a couple of javascript arrays.  It turns out that all the city/state/zip combinations can be stored in a javascript file 1.1mb in size.

At this point you can fairly easily use jquery to add the necessary events to a form field so that it will automatically populate the states from the stored array, then it will automatically populate the city from the selected state, then it will automatically populate the zip from the selected city.  Alternatively, if the user enters a zip code it will automatically populate the city and state.  Since this is all done in javascript it should work in any CMS or custom code.

You can download the code here: citystatezip-js.zip

It requires jquery and works in all the major browsers including ie6.  I included the ruby script in case you need to customize the js arrays with other data.

JP's comment is:
On September 1, 2011 at 7:09 pm

What about cities that have more than one zip code? Also, does it load the data when the page loads or does it do a post back?

It was cool seeing your name up here in lights!

brandon.hoult's comment is:
On September 12, 2011 at 3:52 pm

Hello again JP!

It loads when the page loads, and it will handle multiple zip codes just fine. If you select a city, state that has multiples then it will fill in the first zip code for that city. If you enter any zip code for the city it should update the city/state.

Lee Neat's comment is:
On October 16, 2011 at 1:04 pm

I need some help desperately with the zip code download I did from the link in your blog, federalgovernmentzipcodes.us. I recognize it as sql commands and that it should process in phpmyadm. Can you give me a boost or lead me to a tutorial or the like on how I get it into my web site?

I am not a novice as far as computers are concerned but the majority of my experience was on main frame IBM 365s and 370s (very old school). I have some knowledge of pc processes but not so much with what you and your peers know.

Your help with this request will be greatly appreciated. If you want a link on my web site tell me and I will get back to you with an explanation of what my web site will be so you can decide if you want your link on it.

Thanks for any help you can give me.

Lee

aravind nc's comment is:
On November 10, 2011 at 9:12 am

Hi this is something worth reading.. thanks

TrackBack URL

Leave a comment
Name (required)
Email (required / will not be published)
Website
Usable HTML tags (Copy, paste, and change the text in red for your own)
+ Bold: <strong>Text</strong>
+ Italic: <em>Text</em>
+ Strike: <strike>Text</strike>
Comments