Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chrome: Disable auto-completion menu for Manage Addresses

As of Dec 9, 2019, with Chrome v78.x

I've been experiencing serious problems with disabling auto-completion menus in some places of my web front-end application. Especially on the Chrome browser, even after I applied autocomplete="off" to text inputs that are related to user's physical addresses, it still bugged me with a new type of auto-completion menu with "Manage addresses" option in its underneath.

Here's something obvious: Google Chrome automatically assigns this sort of menu to text inputs that have placeholders like "Street" and "Destination ZIP".

Chrome's auto-completion list for Manage Addresses

This thing is a real bummer because there's literally no way to turn it off unless the input element is not even remotely related with "address-y" terms.

The client made it clear that there should be no auto-completion menus attached. But we cannot display address-related inputs without using address-related words.

What would be the solution to this?

like image 977
Nick Song Avatar asked Dec 09 '19 14:12

Nick Song


People also ask

How do I turn off address suggestions?

On the “Settings” screen, in the “You and Google” section on the right, click “Sync and Google Services.” You're now on the “Google Services” page. Here, scroll down to the “Other Google Services” section, then turn off the “Autocomplete Searches and URLs” option. And you're all set.

How do I turn off autocomplete in Google?

At the top right, tap your Profile picture or initial. Settings. General. Turn off Autocomplete with trending searches.


2 Answers

So here's what I did after hours of research. It works quite well and easy to implement.

  • Make sure the input element's name and id don't include any address-related terms. Attributes like id="input-street" and name="destination-zip" are big no-no.

  • This is the most crucial part: For the input element or any of its adjacent ones where you are required to put any human-readable address terms, insert the "invisible" zero width joiner (‌) between the letters of the said term.

In this way, you can fool the AI capability of Chrome and bypass its strict autocompletion behavior.

Some working examples:

<input id="input-stret" placeholder="S&zwnj;treet" autocomplete="off">

<form action="/action_page.php">
  <label for="product-addres">Product A&zwnj;ddress</label>
  <input name="addres" id="product-addres" autocomplete="off">
</form>

And there you go. No more pesky menus for managing addresses, nor any regular autocompletion menus.

Special thanks to @jblopez who noted out null character can sometimes appear broken on the page.

like image 89
Nick Song Avatar answered Nov 14 '22 22:11

Nick Song


A clean solution is to the autocomplete property on the input fields to anything other than on or off (those are reserved and won't actually turn it off). You can read more about the solution here

like image 28
camiblanch Avatar answered Nov 14 '22 23:11

camiblanch