Chrome Autofill covers Autocomplete for Google Maps API v3

Question

I am using Google Maps Javascript v3 to setup autocomplete on an HTML input field like so:

http://imgur.com/Rm6X2FI.png - (w/out autofill)

The issue I'm having is that Chrome's Autofill covers up the Maps Autocomplete like this:

http://imgur.com/7a2QM7L.png - (w/ autofill)

I found a solution online a couple of months ago (ref: Disabling Chrome Autofill), but it seems that this solution no longer has any effect.

<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none">
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" />

Is there any way I can stop Chrome's Autofill from showing on top of the Google Maps Autocomplete list?

EDIT: Stop Google chrome auto fill the input does not provide a solution to my current issue. The issue is with the Chrome Autofill dropdown on the input field, not the input field being automatically filled with an autofill value.

I got hyped about `input:-webkit-autofill { display: none; }`, but no cigar. — Cole Waldrip, Apr 29 '15 at 15:57
Dang, nothing seems to fix this issue for me. Thanks for your help! — Cole Waldrip, Apr 29 '15 at 20:01
No worries. I will likely do that, though I would rather find out I'm doing something wrong and fix it than find out that it's an issue I can't control. Yeah, tell me about it! I would think Google's products work seamlessly with each other. — Cole Waldrip, Apr 29 '15 at 23:31
It's a shame that it seems the choice is between showing one on top of the other, or disabling one of them. Both can be useful, so ideally Google would make them work together. E.g. have autocomplete start out with the autofill values. Though I recognise that there would be major privacy implications to letting JS read autofill information before you volunteer it. — Henrik N, Nov 28 '17 at 13:48
Hi guys, all the solutions are not working now. Have you guys found the new approach to handle it? It also drove me crazy :'( — trungk18, Jan 30 '18 at 07:13
In my case, I was using autocomplete="new-location", which Chrome does not attempt to autofill, but then the google.maps.places.Autocomplete initializer was resetting autocomplete to 'off', which Chrome ignores. I worked around it by adding a focus handler on the field that resets autocomplete back to "new-location". This runs after the google.maps.places.Autocomplete is initialized. So far, so good as of Chrome 73. — Brian Deterling, Apr 30 '19 at 01:59

score 59 · Answer 1 · answered Mar 07 '18 at 21:23

59

None of the above answers worked for me (Chrome 64.0.3282.186, x64 windows).

TL;DR: The Google Maps code is changing the autocomplete attribute to off, so even if you set it to new-password, you'll still get autofill. The hack I'm using is to listen for mutations on that attribute and then override it. Note: simply changing the attribute after calling into Google Maps does not work.

Set up a MutationObserver before initializing Google Maps Autocomplete that immediately stops listening for mutations and then sets the attribute to new-password.

    var autocompleteInput = document.getElementById("id-of-element");

    var observerHack = new MutationObserver(function() {
        observerHack.disconnect();
        $("#id-of-element").attr("autocomplete", "new-password");
    });

    observerHack.observe(autocompleteInput, {
        attributes: true,
        attributeFilter: ['autocomplete']
    });

answered Mar 07 '18 at 21:23

Rimmel

1,052
1
9
13

20

Funny how google's own service is totally broken on their own browser which doesn't respect the spec. Great workaround. – Feras May 03 '18 at 19:43
1

The `observerHack.disconnect()` resulted in an undefined error for me, so I removed it and added an `if (autocompleteInput.getAttribute('autocomplete') !== 'new-password')` check before setting the attribute. – Ben May 30 '18 at 17:29
Can confirm this workaround in Chrome 60+. If you guys want to track the Chrome team's decision making on ignoring `autocomplete="off"`, consider contributing to [this thread](https://bugs.chromium.org/p/chromium/issues/detail?id=587466). – png Jun 05 '18 at 18:30
Strangely this did not work for me until I changed the HTML element from an input to a textarea and now it works. – Duke Dougal Sep 28 '18 at 23:25
Amazing how this works!! thanks version 72.0.3626.109 windows 10 – hjgraca Feb 27 '19 at 23:31
1

Works for me, might want to include that you need Jquery for your solution to work though. – Vigrant Mar 18 '19 at 20:32
2

Minor fix to remove reliance on jQuery - replace: `$("#id-of-element").attr("autocomplete", "new-password");` with `autocompleteInput.setAttribute("autocomplete", "new-password");` – BlueSix Sep 03 '19 at 04:26
2

omg, it's 2020 and this is still happening. Google Maps JS library is still adding this value that is now ignored by Chrome and causing "double autocomplete". Thanks for writing this answer. – jtlai Apr 25 '20 at 02:22
This gives me an error of: `Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.` – Adam Collingburn Nov 04 '20 at 22:23

Player 0001 · Accepted Answer · 2015-05-05T23:07:01.350

This was driving me totally crazy as well. Have the same issue. We use scripting to pull up field values for a user to select from and DO NOT want the browser's auto-whatever to mess this up. Chrome seems to be the bugger (latest version 42.0.2311.135 m), Firefox (FF) we can work with.

So, we have to deal with the browser's autocomplete AND Chrome's autofill as well. If I add: <form autocomplete="off"> at the top then it stops the autocomplete in FF and Chrome but not the AUTOFILL in Chrome. Changing 'off' to 'false' does nothing for either browser. Solved the FF issue but not Chrome as it shows the ugly AUTOFILL box over content.

If you add autocomplete="off" to each of the fields individually then again, works in FF but for the input fields that have this attribute autocomplete in Chrome is off but the autofill still rears its ugly head.

Now, the odd thing is that if you change the value in the individual input field from "off" to "false" then it seems to shake Chrome up and for the field you have this set to autocomplete="false" then you ONLY see the autocomplete values (if anything was entered in the field before) and all the other input fields show nothing! You can also set this value to no or xx or whatever and seems like Chrome barfs on the invalid value for autocomplete and the form reacts strangely. If you have 5 fields and set this for the third field then fields 1,2, 4 and 5 are blank but field 3 shows autocomplete.

This is an example for you to copy and mess with (try moving the autocomplete attribute to different fields and see how it reacts) :

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input autocomplete="false" name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

My solution to turn off both autocomplete and Chrome's autofill (you should be able to put the hidden input field at the top or bottom below the submit). Add this <input autocomplete="false" name="hidden" type="text" style="display:none;"> to the code:

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    <br />First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

Bottom line: Chrome does adhere to the autocomplete=off but the autofill of Chrome is the problem. Hope this helps.

You're a master. Having `autocomplete="off"` on the form and `autocomplete="false"` on the hidden input worked like a charm for me. Thank you! — Cole Waldrip, May 06 '15 at 23:01
Thank you! This had been bugging me for a while and works perfectly. — Marc, May 14 '15 at 15:06
No it does not work, as soon as you have a Label near the input field that says something like "Address" it will show that stupid dropdown. — Overbryd, May 17 '15 at 14:40
@Overbyrd you trying the code I have? Can you provide a sample of what your code is like or a site to try? I'm in the US and on Chrome 42.0.2311.152. Still works fine. Set up 4 test pages. Can you see if you get the results I indicate in the brief text I have on the page. Basically they go from (should) work to nothing set so you see both autofill and complete. [#1](http://dev.lightspeedinternet.com/chrome1.html), [#2](http://dev.lightspeedinternet.com/chrome2.html), [#3](http://dev.lightspeedinternet.com/chrome3.html), [#4](http://dev.lightspeedinternet.com/chrome4.html) — Player 0001, May 19 '15 at 01:14
This solution doesn't work. Setting `autoComplete="false"` works for a regular input, but breaks after calling `new this.props.google.maps.places.Autocomplete`. — chipit24, Jan 14 '18 at 23:02
Unfortunately doesn't work anymore in version 65 in 2018. Autofill still a problem. — trainoasis, Mar 13 '18 at 09:16
This worked for me May 2019. We use angular and we turned the autocomplete into a subcomponent and wrapped it up with its own form + hidden input. Worked like a charm. — arao6, May 30 '19 at 00:04
Sep 2019: version 76, this is the only solution that works for me. You saved my day!!! — maestroosram, Sep 05 '19 at 09:37
Not working with the latest Chrome. I have done some workaround and it is working now on latest chrome as well. Give a try on solution give below ( in my reply). — Sunil Kumar, Mar 03 '21 at 17:19

score 16 · Answer 3 · answered Aug 17 '18 at 23:45

16

jQuery solution:

$('#address').focus(function() {
    $(this).attr('autocomplete', 'new-password');
});

answered Aug 17 '18 at 23:45

MAXIM

4,662
15
78
125

Noor Muhammad · Answer 4 · 2019-11-01T09:28:19.577

16

Thanks to GSTAR. Instead of Jquery, I used the below code & this worked for me

<input type="text" value="" id="address" class="form-control" placeholder="Enter a location" autocomplete="new-password" onfocus="this.setAttribute('autocomplete', 'new-password');">

edited Nov 01 '19 at 09:28

answered Jun 17 '19 at 13:52

Noor Muhammad

301
2
7

I just needed your onfocus event handler to make it work for me inside Chrome 83.0.4103.61 – CAK2 Jun 09 '20 at 00:46

score 4 · Answer 5 · answered Jan 06 '20 at 21:49

4

via Google Maps Event w/ES6...

new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(input, 'focus', e => e.target.setAttribute('autocomplete', 'new-password'));

answered Jan 06 '20 at 21:49

Nick B

459
3
7

Saurish Kar · Answer 6 · 2020-06-19T16:24:32.603

4

You can try changing the type attribute of your input field to search instead of text.

This will not allow the autofill suggestions to open up on that particular input field.

change this <input type="text" .... /> to <input type="search" ... />

Have tested on chrome 83 and safari 13.0.1. Works fine for me.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

edited Jun 19 '20 at 16:24

answered Jun 19 '20 at 16:18

Saurish Kar

123
1
4

This solution worked for me in angular using matInput. Thanks – Joe Alvini Nov 26 '20 at 22:15
Nothing else was working for me, but this did! – Scottie Mar 02 '21 at 00:57

score 2 · Answer 7 · answered Dec 30 '18 at 01:54

2

To quote Elmux's comment on answer https://stackoverflow.com/a/50927328/1350573 above:

With Chrome 71, I removed the attribute placeholder from the console, and it works automagically. If I change the attribute value for something else, it works too. Finally, avoid using the term 'Address' in the placeholder attribute. – Elmux

For me (30th December 2018, Chrome 71) this was the correct, but non-intuitive answer.

answered Dec 30 '18 at 01:54

Philip Callender

1,341
1
13
21

2

yep found this too, basically if you don't want chrome to auto-fill then make sure it can't tell it's an 'address' field – Lance Jan 17 '19 at 00:18
1

For me it is triggered by the `name` attribute and the workaround was using a random string for name. – Paulo Scardine Mar 14 '19 at 08:12
I found that it took removing `id`, `name`, and `placeholder` attrs that contained "address" in them – Ollie Khakwani Nov 01 '19 at 16:35

score 2 · Answer 8 · answered Oct 25 '19 at 11:33

Browser - Chrome.

For input where google api is attached, set attribute autocomplete on focus -

onfocus="this.setAttribute('autocomplete', 'new-password')"

and for other fields setting this attribute directly works -

autocomplete="new-password"

For me only this value worked. Any other value and the stupid autofill makes a mess.

Adeesh Jain · Answer 9 · 2018-06-18T12:41:20.480

Use autocomplete="new-password" for input field for which you want auto-fill to be disabled. Google Chrome intentionally ignores autocomplete="off | false" but if you set to "new-password", then it ignores auto-fill.

Also check Google Places API way of handling auto-fill, ideally this should be the approach for implementing: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

score 1 · Answer 10 · answered Nov 03 '18 at 11:14

For me, I inserted a string at run time in the middle of the input box ID and form field name that was replaced with the session ID of the current users session. The session ID is as close as anyone can get to unique for every user and session.

In short, what was previously a field called "cust_address" became "cust_a734ohljehgto87y34hpwy9pho3ghseddress" as did the ID of the field My input text box code looked like this:

'<input type=text name="cust_a%sessionid%ddress" id="cust_a%sessionid%ddress" value="" autocomplete="new-password">'

For extra precautions I added the autocomplete="new-password" which seems to work for other fields just not the address allthough it does seem to work on occasion and I havent worked out what causes it to fail or work (yet)...

When my user requests the form, I load it into a variable in PHP and replace all instances of %sessionid% with the session ID of the current user session then output it to the browser.

So far, this has worked like a charm but my system is still in beta testing so it has not had thousands of inputs monitored by Chrome in order for Chrome to figure out the logic and circumvent it - hopefully they dont spend too much time on circumventing these fixes especially considering it is GOOGLES OWN SYSTEM that is overriding GOOGLES OWN SYSTEM with autocomplete overriding auto-fill from calendar places API !

score 1 · Answer 11 · answered Mar 10 '19 at 17:20

1

I had username and password fields on the same page.

Put a simple unused <form></form> around those and this cleared up the Autocomplete problem.

answered Mar 10 '19 at 17:20

bendecko

2,101
1
19
29

score 1 · Answer 12 · answered May 01 '20 at 10:34

1

I had the same issue and solved it using the below jquery function

$( document ).ready(function() {
  if($('#address').length > 0){
    $('#address').on('focus',function() {
        $(this).attr('autocomplete', 'nope');
    });

  }
});

answered May 01 '20 at 10:34

Ankush Goyal

51
4

score 0 · Answer 13 · answered May 12 '18 at 18:45

For those that are using Angularjs, I created a directive based on @Rimmel answer that is working for me in Chrome 66.0.3359.139. Below is the code:

(function(){
  'use strict'; 
  angular.module('app.directive')
    .directive('stopAutofill', stopAutofillDirective);

  function stopAutofillDirective() {
      return {
        restrict: 'A',
        link: function (scope, element) {
            var observerHack = new MutationObserver(function () {
                observerHack.disconnect();
                element.attr("autocomplete", "new-password");
            });

            observerHack.observe(element[0], {
                attributes: true,
                attributeFilter: ['autocomplete']
            });
        }
      };
    };
})();

Hooman Bahreini · Answer 14 · 2018-07-29T00:26:19.050

0

I tried the sample from Google's Address Finder, and got the same problem:

Updated Answer

With the new version of chrome, all you need is to add: autocomplete="off" to your input:

<input id="autocomplete" autocomplete="off" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

Original Answer - Workaround

This is the automcomplete input, which has the event: onFocus="geolocate()":

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

I added this line to geolocate, to hide the autocomplete:

function geolocate() {
    // add this line to hide the autocomplete
    $("#autocomplete").attr("autocomplete", "new-password");

    // other stuff
}

edited Jul 29 '18 at 00:26

answered Jun 19 '18 at 11:28

Hooman Bahreini

11,018
7
41
74

1

With Chrome 71, I removed the attribute placeholder from the console, and it works automagically. If I change the attribute value for something else, it works too. Finally, avoid using the term 'Address' in the placeholder attribute. – Elmux Dec 17 '18 at 16:24
autocomplete="off" not working with latest chrome, see this thread https://bugs.chromium.org/p/chromium/issues/detail?id=587466 – Lance Jan 17 '19 at 00:20
@Lance: the bug that you have linked is from Feb 2016!! Are you saying that, 3 years later, this is still an issue!?? autocomplete="off" is working for me and I am using chrome 71 - which is the latest version as of today. If this is not working for you, I suggest double checking your chrome version. – Hooman Bahreini Jan 17 '19 at 00:29
Yes that is what I'm saying. There are a lot of recent comments (complaints!) in that same thread over last two years. If you go to googles own example https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform you will see it has autocomplete=off, but if your settings have save and fill addresses setup in chrome then you get the ugly prompt for saved addresses over the top of what you want. – Lance Feb 03 '19 at 23:04

score 0 · Answer 15 · answered Sep 18 '18 at 10:20

Workaround:

$('#Name').on('mouseup keyup', function () {
        var val = $('#Name').val();
        val = val.length;
        if (val === 0) {
            $('#Name').attr('autocomplete', 'on');
        }
        else {
            $('#Name').attr('autocomplete', 'new-password');
        }
    }).on('mousedown keydown', function () {
        var val = $('#Name').val();
        var length = val.length;
        if (!length) {
            $('#Name').attr('autocomplete', 'new-password');
        }
    })

Not sure why this was voted down... It actually works in a general scenario (non-google maps). — Matt Murphy, Oct 22 '18 at 12:52

score 0 · Answer 16 · answered Oct 08 '18 at 11:13

I managed to fix this issue for Chrome 69 by changing the input's placeholder.

I had 2 inputs tied to Google Places Autocomplete. As soon as you clicked the field, autofill showed up covering the suggestions from Autocomplete. I also had a listener set-up to change the 'autocomplete' attribute of the input to something random, like 'no-google-autofill'. That worked well until I upgraded to Chrome 69.

Eventually, I fixed it by changing the input's placeholder from 'Postcode' to 'Area'. Apparently, the autofill got triggered because of the placeholder. Sometime's Chrome tries to be too smart for its own good.

For me it was triggering because of the `name` attribute and the thread has people reporting the `id` attribute can trigger it as well. Setting the field's name/id to some random string instead of "address" does the trick for me. — Paulo Scardine, Mar 14 '19 at 08:11

score 0 · Answer 17 · answered Apr 24 '19 at 14:18

This is driving me crazy, after testing lot of stuff, what I had to do to prevent this behavior is not giving a hint to chrome that's an address.

Not an easy challenge to make it user friendly without mentioning the words "address", "street", etc

I end up using the word "Location" in the placeholder. I didn't use any other attribute like autocomplete. Simply never mention anywhere it's an address, and Chrome will stop doing this.

I hope this can help others.

score 0 · Answer 18 · answered Aug 06 '19 at 22:33

0

<input id="autocomplete" autocomplete="nope" type="text" onFocus="this.setAttribute('autocomplete','nope'); geolocate();">

answered Aug 06 '19 at 22:33

Brennan James

49
3

score 0 · Answer 19 · answered Apr 02 '20 at 11:07

You can avoid the Chrome autofill overlay by placing the places autocomplete <input> field outside of the <form> element (tested in Chrome 80.0.3987.149).

That does of course introduce new issues in terms of structuring and styling your HTML.

I recommend to have input fields such as <input name="street" type="hidden" /> or <input name="city" type="hidden" /> inside your <form> element that you then fill after the user selected an address from the places autocomplete widget outside of the <form> element.

score 0 · Answer 20 · answered Dec 16 '20 at 07:29

Simply use below code, this should help you. It will set autocomplete attribute to "new-loc" (you can add any custom value like new-address etc.).

var input = $("#myaddress");
this.$window.google.maps.event.addDomListener(input[0], 'focusin', e => e.target.setAttribute('autocomplete', 'new-location'));

score 0 · Answer 21 · answered Dec 23 '20 at 20:22

0

    var address1 = document.getElementById("myaddress");
    address1.addEventListener("focus", clearDefaultAutoComplete);
    function clearDefaultAutoComplete() {
        address1.removeAttribute("autocomplete");
        address1.setAttribute("autocomplete", "no");
    }

answered Dec 23 '20 at 20:22

ubaid ullah

1

1

Welcome to StackOverflow. While this code may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit](https://stackoverflow.com/posts/65430487/edit) your answer to add explanations and give an indication of what limitations and assumptions apply. – Ruli Dec 23 '20 at 21:32

score 0 · Answer 22 · answered Mar 03 '21 at 17:16

Follow these best practice to achieve this:

Use autocomplete="off" on main <form> element
For the field itself, put autocomplete to anything other than off for e.g `autocomplete="no-autocomplete"
Create input with dynamic name and then use value of this with real field ( put the real field with type="hidden" attribute.
Very Important : Take input type="search" instead of text. In most of cases, this will step only will resolve your problem.

example:

 <form autocomplete="off" method="post">
    <input type="hidden" name="original-input-name" id="originalInput">
    <input type="search" id="fakeInput" name="{any_random_name}" onblur="document.getElementById('originalInput').value = this.value">                                             
</form>

score 0 · Answer 23 · answered Mar 12 '21 at 18:53

0

Setting the input type as type="search" worked for me

answered Mar 12 '21 at 18:53

Derek Baker

78
8

score 0 · Answer 24 · answered Apr 27 '21 at 20:14

I added a EventListener for focus setting the autocomplete attribute. Worked for me.

const initAutocomplete = () => {
    address = document.getElementById('GPA');
    city = document.getElementById('city');
    zip = document.getElementById('zip');
    autocomplete= new google.maps.places.Autocomplete(address, {
    componentRestrictions: { country: ["de"] },
    fields: ["address_components"],
    types: ["address"],
    });
    
    autocomplete.addListener("place_changed", fillInAddress);
    
    address.addEventListener('focus', () => {
      address.setAttribute('autocomplete', 'new-password')
    })
  }

score 0 · Answer 25 · answered May 19 '21 at 10:13

I spent hours searching for the perfect solution that would work in all browsers and finally found it!

TL;DR

Rename your input field names and field ids to something non-related like 'data_input_field_1'. Then add the ‌ character into the middle of your labels. This is a non-printing character, so you won't see it, but it tricks the browser into not recognizing the field as one needing auto-completing, thus no built-in auto-complete widget is shown!

The Details

Almost all browsers use a combination of the field's name, id, placeholder, and label to determine if the field belongs to a group of address fields that could benefit from auto-completion. So if you have a field like <input type="text" id="address" name="street_address"> pretty much all browsers will interpret the field as being an address field. As such the browser will display its built-in auto-completion widget. The dream would be that using the attribute autocomplete="off" would work, unfortunately, most browsers nowadays don't obey the request.

So we need to use some trickery to get the browsers to not display the built-in autocomplete widget. The way we will do that is by fooling the browser into believing that the field is not an address field at all.

Start by renaming the id and the name attributes to something that won't give away that you're dealing with address-related data. So rather than using <input type="text" id="city-input" name="city">, use something like this instead <input type="text" id="input-field-3" name="data_input_field_3">. The browser doesn't know what data_input_field_3 represents. But you do.

If possible, don't use placeholder text as most browsers will also take that into account. If you have to use placeholder text, then you'll have to get creative and make sure you're not using any words relating to the address parameter itself (like City). Using something like Enter location can do the trick.

The final parameter is the label attached to the field. However, if you're like me, you probably want to keep the label intact and display recognizable fields to your users like "Address", "City", "State", "Country". Well, great news: YOU CAN! The best way to achieve that is to insert a Zero-Width Non-Joiner Character ‌ as the second character in the label. So replacing <label>City</label> with <label>C‌ity</label>. This is a non-printing character, so your users will see City, but the browser will be tricked into seeing C ity and not recognize the field!

Mission accomplished! If all went well, the browser should not display the built-in address auto-completion widget on those fields anymore!

Hope this helps you in your endeavors!

score 0 · Answer 26 · edited May 26 '21 at 07:27

It's just a simple solution, Don't use standard autocomplete phrases in name, id and placeholder. And add autocomplete="off".

All works on version 90.0.4430.212

I use data-name instead of name

<input value="Russia" data-name="country" type="text" placeholder="Write something" autocomplete="off">

Check the list of phrases here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Chrome Autofill covers Autocomplete for Google Maps API v3

26 Answers26

Updated Answer

Original Answer - Workaround

TL;DR

The Details

Linked