autocompletar para la ciudad del estado usando el código postal

Hola, tengo un campo de código postal cuando el usuario ingresa un código postal de 5/9 dígitos, debe completar automáticamente los campos de estado y ciudad.

¿Hay algo como esto usando javascript o JQuery ???

Muchas Gracias

preguntado el 16 de mayo de 11 a las 18:05

5 Respuestas

Usando la API de Javascript Google Maps V3:

Necesita hacer referencia a esto:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Haz esto: =

    var zip = <yourzipcode>;
    var lat;
    var lng;
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': zip }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            geocoder.geocode({'latLng': results[0].geometry.location}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    var loc = getCityState(results);
                }
            }
        });
        }
    }); 

function getCityState(results)
    {
        var a = results[0].address_components;
        var city, state;
        for(i = 0; i <  a.length; ++i)
        {
           var t = a[i].types;
           if(compIsType(t, 'administrative_area_level_1'))
              state = a[i].long_name; //store the state
           else if(compIsType(t, 'locality'))
              city = a[i].long_name; //store the city
        }
        return (city + ', ' + state)
    }

function compIsType(t, s) { 
       for(z = 0; z < t.length; ++z) 
          if(t[z] == s)
             return true;
       return false;
    }

Todo esto devuelve una cadena que contiene la ciudad y el estado en este formato, pero puede ajustarlo a sus necesidades.

contestado el 17 de mayo de 11 a las 17:05

¿Cuáles son las otras referencias que tengo que incluir? Se produce un error como Error: google.maps es un archivo de origen indefinido: localhost / SWP / JavaScript / JqueryScriptSource.js para esta línea: var geocoder = new google.maps.Geocoder (); - user695663

¿Para qué es esto? "compIsType" recibí el siguiente error Error: compIsType no está definido - user695663

Woops no pegó eso. Lo había hecho yo mismo y me perdí ese método al pegar este código. - slandau

Las respuestas a continuación funcionan bien, pero es difícil superar a Google en cuanto a precisión. Además, Google admite https:// tal que tu https:// el sitio no recibe la etiqueta de advertencia amarilla al realizar una http:// solicitar. El código postal es información confidencial, por lo que no desee que el usuario reciba una señal de que algo anda mal. - tim peterson

contestado el 16 de mayo de 11 a las 22:05

Encontré un artículo en Css-tricks.com, la funcionalidad se implementa usando Ziptastic http://css-tricks.com/using-ziptastic/

$.ajax({
url: "http://zip.elevenbasetwo.com",
cache: false,
dataType: "json",
type: "GET",
data: "zip=" + el.val(),
success: function(result, success) {

$(".fancy-form div > div").slideDown(); /* Show the fields */

$("#city").val(result.city); /* Fill the data */
$("#state").val(result.state);

$(".zip-error").hide(); /* In case they failed once before */

$("#address-line-1").focus(); /* Put cursor where they need it */

},
error: function(result, success) {

$(".zip-error").show(); /* Ruh row */

}

});  

Respondido el 10 de enero de 13 a las 17:01

@Ruchi No lo he intentado, pero creo que puedes usar "jsonp" para superar el problema de origen cruzado. - Himanshu Saini

RedLine tiene una API de código postal que hace esto de forma gratuita. Tienen código de muestra aquí http://zipcodedistanceapi.redline13.com/Examples.

Respondido 11 ago 13, 19:08

Se agradecen todas las respuestas. Si no quiere entrar en más complejidad de código, aquí hay una solución para usted.

primer Paso:

descargue el último archivo de Excel del código postal del país y ubique ese archivo de Excel en la carpeta raíz (puede descargarlo aquí)
https://data.gov.in/catalog/all-india-pincode-pirectory#web_catalog_tabs_block_10)

Segundo paso:

Llame a la función ajax donde está su formulario

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type=”text/javascript”><br>
jQuery(document).ready(function(){
jQuery(‘.postcode‘).blur(function(){ //.postcode class of zipcode text field
var s = jQuery(this).val();
jQuery.ajax({
type: ‘POST’,
url:“http://www.sample.com/postcode.php“, //file which read zip code excel     file
dataType: “json”, //is used for return multiple values
data: { ‘s’ : s },
success: function(data){
try {
jQuery(“.state“).val(data.state); //region-class of state text field
jQuery(“.city“).val(data.dist);//city-class of city text filed
} catch (e) {
alert(e.Message);
}
},
error:function (xhr, status, err){
alert( “status=” + xhr.responseText + “, error=” + err );
}
});
});
});
</script>

Esta función Ajax llamará "http://www.sample.com/postcode.php" expediente

En el archivo postcode.php tenemos que leer el archivo de Excel y devolver el valor del estado y la ciudad

postcode.php

<?php
extract ($_POST);
$s=$_POST[‘s’];  //get value from ajax
$filename=”zip.csv“; //zipcode csv file(must reside in same folder)
$f = fopen($filename, “r”);
while ($row = fgetcsv($f))
{
if ($row[1] == $s) //1 mean number of column of zipcode
 {
  $district=$row[3];  //3- Number of city column
  $state=$row[4]; //4-Number of state column
  break;
 }
}
fclose($f);
echo json_encode(
 array(“dist” => $district,
 “state” => $state,
 “zip” => $s)
);  //Pass those details by json
?>

Eso es todo, disfruta

respondido 25 mar '15, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.