使用邮编自动填写州城市

Question

嗨，我有一个邮政编码字段，当用户输入5/9数字邮政编码时，它应该自动填充州和城市字段。

有没有像这样使用JavaScript或JQuery？

感谢

Answer 1

使用JavaScript谷歌地图V3 API：

您需要引用此：

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

这样做：=

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; 
    } 

这一切都会以此格式返回一个包含城市和州的字符串，但您可以根据需要调整它。

Answer 2

谷歌称是：http://bassistance.de/2009/03/03/jquery-snippet-autocomplete-city-based-on-zip-code/

Answer 3

实测值上Css-tricks.com的制品，功能是使用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 */ 

} 

}); 

Answer 4

实现的红线具有邮编APIthat执行此是免费的。他们在这里有示例代码http://zipcodedistanceapi.redline13.com/Examples。

Answer 5

所有的答案赞赏，如果你不想陷入更复杂的代码，这里是你的解决方案。

第一步：

下载最新全国邮政编码的Excel文件，然后找到根文件夹下的Excel文件（你可以在这里下载）
https://data.gov.in/catalog/all-india-pincode-pirectory#web_catalog_tabs_block_10）

第二步：

呼叫阿贾克斯功能你的表格在哪里

<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> 

这阿贾克斯功能将称之为“http://www.sample.com/postcode.php”文件

下，我们必须读取Excel文件并返回状态和城市价值

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 
?> 

这是postcode.php文件全部，享受