Google Place Autcomplete Address API forces HTML Autocomplete = Off

Question

We have a standard form for address (Street 1, Street 2, City, State, Zip, Country).

When I add the code for Google Places Autocomplete API on Street 1 it automatically changes the input fields autocomplete to off when loading the page which makes HTML/Browser Autofills not work on Street 1.

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

Any ideas on how to rectify this; why would Google Place Autcomplete API change the field to autocomplete='off'?

I have tried to modify the Google javascript variable "autocomplete" to "autocomp" thinking it had something to with that but still same result.

      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] ...}

This is normal practice for most autocomplete implementations via JavaScript since it could cause confusion to the end-user since there could be multiple suggestion lists appearing. — BA_Webimax, Oct 15 '18 at 18:11
Why would you want it on if you already use another autocomplete plugin? — plalx, Oct 15 '18 at 23:37
@plalx It's a shipping address form for Ecommerce website. Starts with First Name and browser autocomplete comes up, which can be very convenient for end-user. If user gets to Street Address 1 without utilizing their browser autocomplete (prefill) then Google Autocomplete API is utilized when one starts typing. — ToddN, Oct 15 '18 at 23:42
Could you make a simple snippet which reproduce the problem ? — ElJackiste, Oct 16 '18 at 08:16
@ToddN The first name would be input in a different field than address though, right? Do you mean that autocomplete gets disabled for the entire form? — plalx, Oct 22 '18 at 11:57

score 1 · Accepted Answer · answered Oct 22 '18 at 17:08

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

By writing the above code you are telling GMaps that this is the field you need to predict places for. its kinda like a search bar for places, any kind of search bar wouldn't have autocomplete on it.It wouldn't make any sense if its autofilled by browser.

if you want to have it that way, use the WebService API, send HTTP requests and fill the fields with its response.

From the Docs, A request for establishments containing the string "Amoeba" within an area centered in San Francisco, CA: https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=Amoeba&types=establishment&location=37.76999,-122.44696&strictbounds&key=YOUR_API_KEY A GET request to the above URL with Query Parameters input=Paris&types=geocode will give a JSON Object containing the predictions.

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

Google Place Autcomplete Address API forces HTML Autocomplete = Off

1 Answers1