Enter A Zip Code Using Google Suggest-Type Lookups

This is a test of Google Suggest-type lookups for a query. This technique uses XmlHttp requests to get a new list of lookup results in the background every time the value in the lookup field changes, so this page doesn't have to be reloaded over and over again. To improve performance, lookup results are also cached locally so duplicate requests aren't made during a given session.

Just start typing a US Zip Code (sort of slowly, for the best effect) in the input box below, and a database list of zip codes will be searched as you type, presenting you with up to 10 matches for what you're typing. You can then use your mouse or the arrow keys to select a zip code from the drop-down list that appears, and either click the result (if you're using a mouse) or press enter or tab (if you're using the arrow keys) to select a value.

Notes about this technique:

• I made heavy use of Chris Justus' Google Suggest Dissected article in writing the scripts that do the lookups. If you want to see how I implemented the XMLHttp lookup technique, here's the JavaScript source file.

• I've only tested this on Internet Explorer 6 and Firefox 1.0 on Windows. I have no idea how well it works with other browsers/platforms (although I've been told it works properly with Safari on a Mac, too). The original Google technique has the option of making calls to a hidden iFrame, if you're curious about greater browser compatibility (again, see Chris Justus' article).

• The list of zip codes I'm looking up is not meant to be complete or definitive in any way -- this is just an example of a lookup technique. Please don't send me any e-mails telling me that I'm missing a zip code or I have a county mapping wrong, because I don't care and I'm not trying to be 100% accurate here. I got the list that I'm using from the 1999 US Census data and then cross-referenced the FIPS codes with a table of county/state listings that I found somewhere. Overall it's about 42,000 records (stored in a MySQL database), and it does nicely for demonstration purposes.

• I'm not posting the back-end lookup code here for a few reasons. First, I don't want to invite people to try to hack my site by exploring "weaknesses" in my code. Second, your implementation of this functionality will probably differ from mine. Third, if you're implementing this sort of thing, you really need to write the backend code yourself, to make sure you understand how it works.

  That being said, all you're really worried about is the format of the output. With the JavaScript XmlHttp code that I'm using here, a lookup of "9990" should return a result like this from the backend code:

  showQueryDiv("9990", new Array("99901","99903"), 
  new Array("KETCHIKAN GATEWAY, AK","PR WALES-OUTR KTCH, AK"))

  The result should be a single line of plain text, not an HTML page. If you're a coder, you should be able to figure out the implementation yourself. If you're not, you probably shouldn't be trying to do this in the first place.

• If you decide you're going to copy this page to your site or your local hard drive and try to run it, it probably won't work. You have to run it from here. This is due to security limitations on the XmlHttp object, which requires requests to be made to the same domain as the page is on. If you want to demonstrate this technique on your own site, you'll have to do your own lookups (and if you use some or all of my code, I'd appreciate it you linked back here ;-).