bassistance.de

Just added this to my project on the registration page, after reading the Developerworks article Cross-domain communications with JSONP:

$("#zipCode").blur(function() {
	var city = $("#city");
	if (!city.val() && $(this).valid()) {
		$.getJSON("http://www.geonames.org/postalCodeLookupJSON?&country=DE&callback=?", {postalcode: this.value }, function(response) {
			if (!city.val() && response && response.postalcodes.length && response.postalcodes[0].placeName) {
				city.val(response.postalcodes[0].placeName);
			}
		})
	}
});

Upon blur of the zip input, it checks if city is still empty and the entered zip is valid (using the validation plugin, you could just as well just check for this.value), then uses $.getJSON to request JSONP from the geonames.org webservice. The country parameter is hardcoded to “DE” in this case, while the postalcode parameter is passed as the second argument, taking the entered zip value.

When the response returns, the city field is checked again, to avoid overwriting any user input when dealing with high latency, and the response is checked for the property to insert, to avoid any “property xxx is undefined” JavaScript errors when something goes wrong. In this case its preferred to fail silently, as the feature is nothing more then a helper anyway.

Finally, the city field is updated with the placeName attribute. The webservice also provides “adminName1” and “adminCode1” properties. Here is a sample response for my location (I added some whitespace):

?({"postalcodes":[{"postalcode":"51065", "adminCode1":"NW", "countryCode":"DE", "lng":7.005625, "placeName":"Köln", "lat":50.9578, "adminName1":"Nordrhein-Westfalen"}]});