使用郵編自動填寫州城市

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文件全部，享受