隱藏顯示城市和狀態，當郵編填充

javascript：我想顯示城市和州填寫郵政編碼時。我有地理位置工作，但現在我只想要城市和州顯示郵政填充時在隱藏顯示城市和狀態，當郵編填充

這是我的HTML：

<label for="city">City</label> 
<input size="20" placeholder="Town or City" name="city" id="city" type="text"> 
      <br> 
<label for="state">State</label> 
<input size="10" placeholder="State/Province" name="state" id="state" type="text">

這是我的JavaScript：

zip.addEventListener("change", getGeo); 

function getGeo(e){ 

// make an send an XmlHttpRequest 
var x = new XMLHttpRequest(); 
x.open("GET","http://maps.googleapis.com/maps/api/geocode/json?address="+this.value,true); 
x.send(); 

// set up a listener for the response 
x.onreadystatechange=function(){ 
    if (this.readyState==4 && this.status==200){ 

    var c = JSON.parse(this.response).results[0].address_components[1].long_name; 
    //alert(c); 
    var s = JSON.parse(this.response).results[0].address_components[2].short_name; 
     //alert(s); 
     if (c) { 
      city.value = c; 
     } 
     if (s) { 
      state.value = s; 
     } 

     //document.getElementById("output").innerHTML = o; 
     var l = JSON.parse(this.response).results[0].geometry.location; 
     if (l.lat) { 
      lat.value = l.lat; 
     } 
     if (l.lng) { 
      lon.value = l.lng; 
     } 

    } 
} 
}

這一切都在這的jsfiddle http://jsfiddle.net/lakenney/gad7ntgk/

來源

2015-05-10 LucyK

目前還不清楚你在問什麼。從地理編碼請求返回時，您是否想要顯示city + state字段？ –

爲什麼你json解析響應多次？將解析結果存儲一次......效率更高 – charlietfl

看起來你已經有了一個良好開始，但這個例子可能會有所幫助。運行代碼片段並輸入郵政編碼或城市名稱。我保持它很簡單，但你可以檢查數據數組的長度。當等於1時，你有一個匹配，並可以在頁面上顯示地理位置和其他內容。

請記住，你正在做一個跨域AJAX調用......這將失敗在IE < 10.如果你需要幫助，很多關於這個問題。

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<title>Demo</title> 
 
<style type="text/css"> 
 
    #container {position: relative; } 
 
    #location {width: 20em; border: 1px steelblue solid;} 
 
    #results { border: 1px gray solid; padding: 2px; position: absolute;background-color:aliceblue;} 
 
    #results ul { list-style: none; padding: 0; } 
 
    #results ul li {padding: 2px; color: dimgray; } 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<div id="container"> 
 
    Enter a city or postal code:<br> 
 
    <input id="location" type="text" onKeyup="getLocation()" value="London"> 
 
    <div id="results"></div> 
 
</div> 
 

 
<script type="text/javascript"> 
 

 
function getLocation() { 
 
    var value, xhr, html, data, i; 
 
    value = document.getElementById('location').value; 
 
    if (value.length < 2) return; 
 
    xhr = new XMLHttpRequest(); 
 
    xhr.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?address=" + value, true); 
 
    xhr.onreadystatechange = function() { 
 
     if (xhr.readyState==4 && xhr.status==200) { 
 
      data = JSON.parse(xhr.responseText); 
 
      html = ''; 
 
      for(i=0; i< data.results.length; i++) { 
 
       html += '<li>' + data.results[i].formatted_address; 
 
      } 
 
      document.getElementById('results').innerHTML = '<ul>' + html + '</ul>'; 
 
     } 
 
    } 
 
    xhr.send(); 
 
} 
 
    
 
getLocation(); 
 
document.getElementById('location').focus(); 
 

 
</script> 
 
</body> 
 
</html>

來源

2015-05-11 01:13:28 Roberto

查看更新的jsfiddle。 http://jsfiddle.net/gad7ntgk/3/

問題，你已經是這個HTML被註釋掉：

<!--<label for="city">City</label> 
      <input size="20" placeholder="Town or City" name="city" id="city" type="text"> 
      <br> 
      <label for="state">State</label> 
      <input size="10" placeholder="State/Province" name="state" id="state" type="text">-->

當值返回的值的分配應該是：

document.getElementById('city').value = c;

來源

2015-05-10 23:26:52

隱藏顯示城市和狀態，當郵編填充

回答

相關問題