jQuery Snippet: Autocompletar ciudad basada en un código postal

jQuery Snippet: Autocompletar ciudad basada en un código postal
agosto 17, 2016
1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, promedio: 5,00 de 5)
Cargando…

Acabo de añadir esto a mi proyecto en la página de registro, después de leer el artículo de developerWorks “Cross-domain communications with JSONP”

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

Tras la pérdida de foco del campo “código postal”, comprueba si la ciudad sigue vacía y si se ha introducido un código postal válido (usando el plugin de validación, también se podría comprobar simplemente this.value), a continuación, utiliza $ .getJSON para solicitar un JSONP de geonames.org. El parámetro país está codificado como “ES” en este caso, mientras que el parámetro postalcode se pasa como segundo argumento, tomando el valor postal introducido.

Cuando devuelve la respuesta, se comprueba de nuevo el campo ciudad, para evitar sobrescribir cualquier entrada del usuario cuando se trata de alta latencia, y la respuesta está marcada por la propiedad para insertar, para evitar cuando algo va mal que se produzca el error de JavaScript “xxx propiedad no está definida”. En este caso su preferían el fallo silencioso, ya que la función es nada más que un ayudante de todos modos.

Finalmente, el campo ciudad se actualiza con el atributo de placeName. El servicio web también proporciona “adminName1” y propiedades “adminCode1”. Este es un ejemplo de respuesta de una ubicación (con algunos espacios en blanco) añadidos a proposito:

?({"postalcodes":[{"postalcode":"28080", "adminCode1":"NW", "countryCode":"ES", "lng":7.005625, "placeName":"Madrid", "lat":X.X, "adminName1":"XX-XX"}]});

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *