自动输入数据取决于我输入的html格式

问题描述：

如何自动输入数据取决于我输入的html格式。

例如：

的形式

有两场“城市”和“ZIPCODE” 我想，当有人在邮政编码字段输入任何邮政编码市话领域汽车充满了

更多例子：

input zipdcode="1050" auto input in city="dhaka" 
input zipcode="3000" auto input in city="barisal" 
input zipcode="5000" auto input in city="khulna"

就这样在这里是一个图片

你有什么迄今所做？你的源代码在哪里？你可以使用AJAX和JSON来实现这一点。 –

您必须首先创建所有邮编和城市的“地图”，可能在数据库中，然后从那里开始 – adeneo

答

结帐以下

const zipInput = document.querySelector('#zip'), 
 
     cityInput = document.querySelector('#city'), 
 
     zipCityMap = { 
 
      1050: 'dhaka', 
 
      3000: 'barisal', 
 
      5000: 'khulna' 
 
     } 
 

 
zipInput.addEventListener('keyup', myKeyup); 
 

 
function myKeyup(e){ 
 
    const city = zipCityMap[this.value]; 
 
    if(city){ 
 
    cityInput.value = city; 
 
    } else { 
 
    cityInput.value = ''; 
 
    } 
 
}

<input id="zip" value=""/> 
 
<input id="city" value="" />

感谢它的工作 –

答

谷歌的地理编码API是适合您的要求，如果有可能比它的JS-API的帮助下将其用于您的应用程序。

FOR EXAMPLE

var geocoder = new google.maps.Geocoder(); 

//event bind on your zipcode filed 
$('.zipcode').bind('change focusout', function() { 
    var $this = $(this); 
    if ($this.val().length == 5) { 
     geocoder.geocode({ 'address': $this.val() }, function (result, status) { 
      var state = "N/A"; 
      var city = "N/A"; 
      //start loop to get state from zip 
      for (var component in result[0]['address_components']) { 
       for (var i in result[0]['address_components'][component]['types']) { 
        if (result[0]['address_components'][component]['types'][i] == "administrative_area_level_1") { 
         state = result[0]['address_components'][component]['short_name']; 
         // do stuff with the state here! 
         $this.closest('tr').find('select').val(state); 
         // get city name 
         city = result[0]['address_components'][1]['long_name']; 
         // Insert city name into some input box 
         $this.closest().find('.cityByZipcode').val(city); 
        } 
       } 
      } 
     }); 
    } 
});

var geocoder; 
 
var map; 
 
function codeAddress() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var address = document.getElementById('address').value; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 

 
     for (var component in results[0]['address_components']) { 
 
     for (var i in results[0]['address_components'][component]['types']) { 
 
      if (results[0]['address_components'][component]['types'][i] == "administrative_area_level_1") { 
 
      state = results[0]['address_components'][component]['long_name']; 
 
      alert(results[0]['address_components'][1]['long_name'] + ' , ' + state); 
 
      } 
 
     } 
 
     } 
 
    } else { 
 
     alert('Invalid Zipcode'); 
 
    } 
 
    }); 
 
}

<html> 
 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Geocoding service</title> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
</head> 
 

 
<body> 
 
    <div id="panel"> 
 
    <input id="address" type="textbox" value="387220"> 
 
    <input type="button" value="Geocode" onclick="codeAddress()"> 
 
    </div> 
 
    <div id="map-canvas"></div> 
 
</body> 
 
</html>

自动输入数据取决于我输入的html格式

相关推荐