使用 Google 地图 v3 自动完成表单时如何使用 javascript 清除搜索输入字段

Question

我正在使用 Google 地图 v3 api 自动完成地址表单，但我不想使用示例中的常规搜索字段（https://google-developers.appspot.com/maps/documentation/javascript/examples/full/地点自动完成地址表格）。

我试图将街道地址字段以及街道号码和街道名称字段设为搜索字段。我在 JS fiddle ( https://jsfiddle.net/smartystreets/0c9fy73v/ ) 上找到了这个例子，我无法复制它。

我尝试关闭 autocomplete=off 但在 chrome 上不起作用（对于 elementId('autocomplete')）

我尝试隐藏路线和街道输入元素并将输入 id 值设置为空。

document.getElementById('autocomplete').value = ''; 

然后使用隐藏的输入字段重建该表单输入w/

document.getElementById('autocomplete').value = document.getElementById('street_number') + ' ' + document.getElementById('route');

有什么想法我做错了吗？为什么搜索栏不清晰？

这是我的搜索/地址字段的 HTML：

<!-- address -->
   <div class="col-md-6 col-lg-6">
      <label class="light text-capitalize">address:</label>
      <input type="text"   id="autocomplete"
         name="street" placeholder="Street address, PO Box, etc.">
      <input type="hidden" id="route" disabled="false">
      <input type="hidden" id="street_number" disabled="false"> 
      <input type="text"  name="address1" placeholder="(Optional) Apartment, Suite, Floor, etc.">
   </div>
<!-- address end -->

这是我的内联 JS

  var placeSearch, autocomplete;
  var componentForm = {
     street_number: 'short_name',
     route: 'long_name',
     locality: 'long_name',
     administrative_area_level_1: 'short_name',
     postal_code: 'short_name'
  };

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

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();


    for (var component in componentForm) {

    document.getElementById('street_number').value = '';
    document.getElementById('route').value = '';
    document.getElementById('locality').value = '';
    document.getElementById('administrative_area_level_1').value = '';
//  document.getElementById('country').value = '';
    document.getElementById('postal_code').value = '';

    }

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

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>

Answer 1

如果您确实想在用户单击自动完成地址后清除搜索输入字段，请尝试在获取地点后将输入 (id=autocomplete) 值设置为空。

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    /* Your other code */

    document.getElementById('autocomplete').value = '';
}

我只是做了一个演示供您检查行为。你可以在这里看到它http://jsbin.com/mugasav/1/edit?html,js,output