谷歌地点自动完成地址API强制HTML自动完成=关闭。

Question

我们有一个标准地址表单（街道1，街道2，城市，州/省，邮编，国家）。

当我在街道1上添加Google Places Autocomplete API代码时，它会在加载页面时自动将输入字段的自动完成功能关闭，这会导致HTML /浏览器自动填充在街道1上无法正常工作。

<input autocomplete="address-line1" type = "text" name = "shipping_address_1" id = "shipping_address_1"   class="ct-required form-control" tabindex=7>

有什么想法可以纠正这个问题吗？为什么Google Place Autcomplete API会将字段更改为autocomplete='off'？

我尝试修改Google的javascript变量“autocomplete”为“autocomp”，以为它与此有关，但结果仍然相同。

      var placeSearch, autocomp;
  var componentForm = {
    shipping_address_1: 'short_name',
    shipping_address_2: 'long_name',
    shipping_city: 'long_name',
    shipping_state: 'short_name',
    shipping_country: 'long_name',
    shipping_zip: 'short_name'
  };



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

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

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomp.getPlace();
    //debug autofillinplaes
    console.log(place);


    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

if (place.address_components) {
    // Get each component of the address from the place details
    // and fill the corresponding field on the form.

    var components_by_type = {};

    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      var c = place.address_components[i];
      components_by_type[c.types[0]] = c;

    }
     var streetnumb = components_by_type['street_number'].short_name;

          var address1 = streetnumb+" "+components_by_type['route'].long_name;
            document.getElementById('shipping_address_1').value = address1;

         var locality = components_by_type['locality'].long_name;     
        document.getElementById('shipping_city').value = locality;

         var administrative_area_level_1 = components_by_type['administrative_area_level_1'].short_name;      
        document.getElementById('shipping_state').value = administrative_area_level_1;

          var country = components_by_type['country'].short_name;             
        document.getElementById('shipping_country').value = country;

          var postal_code = components_by_type['postal_code'].short_name;         
        document.getElementById('shipping_zip').value = postal_code;
... [DO ADDRESS VALIDATION, UPDATE INPUT FIELDS] ...}

- ToddN

---

这是大多数通过JavaScript实现的自动完成功能的正常做法，因为它可能会让最终用户感到困惑，因为可能会出现多个建议列表。 - BA_Webimax

如果您已经使用另一个自动完成插件，为什么还想要它开启呢？ - plalx

@plalx 这是电子商务网站的配送地址表单。以名字为首，浏览器自动填充功能会出现，对最终用户非常方便。如果用户在不利用浏览器自动填充（预填充）的情况下到达第一个街道地址，则开始输入时会使用Google自动填充API。 - ToddN

你能否提供一个简单的代码片段来重现这个问题？ - ElJackiste

@ToddN 那么名字和地址输入框会不同吗？你是指自动完成功能对整个表单都失效了吗？ - plalx

Answer 1

autocomp = new google.maps.places.Autocomplete(
document.getElementById('shipping_address_1')),
        {
            types: ['geocode'],
            componentRestrictions: {country: "us"}
        });

通过编写以上代码，您告诉GMaps这是您需要预测地点的字段。 这有点像地点搜索栏，任何类型的搜索栏都不会自动完成。如果它由浏览器自动填充，那就没有任何意义了。

如果您想以这种方式使用它，请使用WebService API，发送HTTP请求并使用其响应填充字段。

从文档中， 一个包含在旧金山市中心区域内的字符串“ Amoeba”的场所请求： https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=Amoeba&types=establishment&location=37.76999,-122.44696&strictbounds&key=YOUR_API_KEY 对上述URL进行GET请求，并带有查询参数input = Paris&types = geocode将返回一个包含预测的JSON对象。

{
  "status": "OK",
  "predictions" : [
      {
         "description" : "Paris, France",
         "id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
         "matched_substrings" : [
            {
               "length" : 5,
               "offset" : 0
            }
         ],
    ... more results
    ]
} 

- Jaikanth J