I'm using the Google Places API on an address input on my website :
<input type="text" name="street[]" id="street1" autocomplete="none" />
But as soon as the Google Places is loaded it replaces my autocomplete="none" by autocomplete="off". The issue is Google Chrome is not compatible with "off" value and keep display the auto fill suggestion. Is there any way to fix this ?
Thanks !
Here's a method that will work in all browsers:
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!
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!
You can detect when Google Places sets autocomplete="off" and override it this way:
const observer = new MutationObserver(function (mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.attributeName == 'autocomplete' && $(mutation.target).attr('autocomplete') == 'off') {
observer.disconnect();
$(mutation.target).attr('autocomplete', 'none');
}
}
});
observer.observe(document.getElementById('street1'), { attributes: true });
autocomplete = new google.maps.places.Autocomplete(document.getElementById('street1'), {
fields: ['address_components'],
types: ['address'],
});
This issue was previously reported in Google's Public Issue Tracker here: https://issuetracker.google.com/issues/73783829. You can still comment and star it to receive updates and to increase visibility.
For the meantime, you can try the suggestions in these related posts:
Chrome Autofill covers Autocomplete for Google Maps API v3
Stop Google chrome auto fill the input
Hope this helps!
