Question

我有List<T>和id="Pickup Location"这两个字段。我想自动填写印度城市名称的字段。

id="Drop Location"

我有自动完成的Google API代码，效果很好。但是，JS是为输入字段编写的，仅用于<input type="text" value="" name="form[Pickup Location]" id="Pickup Location" onfocus="geolocate()" class="rsform-input-box"> <input type="text" value="" name="form[Drop Location]" id="Drop Location" onfocus="geolocate()" class="rsform-input-box">。

现在，我如何重新编写JS以便它同时接受id="autocomplete"和Pick Location？

PS：我不需要Drop Location字段并将丢弃它。

id=autocomplete

Answer 1

代码需要进行一些更改，而SO不是代码编写服务，所以我会保持基本。

fillInAddress()函数需要html元素来存储两个位置的值。由于这些元素不存在，我删除了该代码。

geolocate()函数看起来只用于地图上的绘图，这在代码中不存在，所以我删除了它。

因此以下仅适用于自动填充。你仍然需要弄清楚如何通过谷歌地图API返回印度城市。

var placeSearch, pickupLocation, dropLocation;

function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    pickupLocation = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('Pickup_Location')), {
      types: ['geocode']
    });

    dropLocation = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('Drop_Location')), {
      types: ['geocode']
    });
}

<input type="text" value="" name="form[Pickup Location]" id="Pickup_Location" placeholder="Pickup Location" class="rsform-input-box">

<input type="text" value="" name="form[Drop Location]" id="Drop_Location" placeholder="Drop Location" class="rsform-input-box">

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADbpfJGWwRh5um_gd2gNySgrI5FAy2RZk&libraries=places&callback=initAutocomplete" async defer></script>

Answer 2

以下代码应根据您的要求为您服务！确保您撰写的表单填写程序正常工作

＆＃13;

function initAutocomplete() {
  var myFirstEle = document.getElementById('firstEle'),
    mySecondEle = document.getElementById('secondEle');
  generateAutoComplete(myFirstEle);
  generateAutoComplete(mySecondEle);

}

function generateAutoComplete(ele) {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  var autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    ele, {
      types: ['geocode']
    });

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress.bind(autocomplete));

}

 function fillInAddress(autocomplete) {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

＆＃13;

通过Google API提供的两个自动填充字段

2 个答案: