How to disable autocomplete and autofill for chrome / jquery

Question

I want to disable both Chrome autocomplete AND Chrome autofill.

I'm using JQuery UI to autocomplete an input field. My jquery-ui autocomplete works fine, however chrome browser displays it's own autofill on top of mine making it difficult for users to select the correct dropdown item.

I'm using autocomplete="off" which seems to disable autocomplete for chrome but shows autofill options .

I've tried the following:

• autocomplete="chrome-off" autocomplete="false" autocomplete="disabled"

Those attribute values ( or any invalid attribute values ) seem to be disabling the *autofill but do enable autocomplete .

Important: I cannot use random name attributes since I am performing ajax requests for my own jquery-ui autocomplete

Answer 1

autocomplete="off"

doesn't work anymore. The only thing which works from 2019 is

autocomplete="new-password"

Answer 2

I finally found a solution by combining a few different answers.

STEP 1

In order to fix the autocomplete issue, you can add a dummy invisible input field as mentioned here . So your html should look something like this:

<input id="dummy_location" type="search" name="dummy_location" style='display: none;'>
<input id="location" type="search" name="location">

This will cause chrome autofill pop-up

STEP 2

To disable the autofill pop-up, we need to add an invalid value for the autocomplete attribute like this.

$("#fromcity_ac").attr({
     autocomplete: "chrome-off",
});

YOU CAN STOP HERE .

Chrome will work fine, however, autocomplete issue will pop up on other browsers such as firefox. To fix this you can edit step 2 by checking what browser is being used and setting an appropriate value for the autocomplete attribute.

 var isChromium = window.chrome; var winNav = window.navigator; var vendorName = winNav.vendor; var isOpera = typeof window.opr;== "undefined". var isIEedge = winNav.userAgent;indexOf("Edge") > -1. var isIOSChrome = winNav.userAgent;match("CriOS"); // Autocomplete default value var autocomplete = "chrome-off". if (isIOSChrome) { // is Google Chrome on IOS } else if ( isChromium;== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && isOpera === false && isIEedge === false ) { // Is google chrome } else { // Is firefox autocomplete = "off"; }

Answer 3

autocomplete="off" to autocomplete="random-value" . This is the temporary fix for now.

Answer 4

try this, this works for chrome

autocomplete="chrome-off"

Answer 5

As of early 2022 this seems to work:

autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" role="combobox" spellcheck="false"

It is the technique used on the google home page search box.

Answer 6

I can confirm that Ryan's answer "As of early 2022 this seems to work" works for me (thank you, Ryan). I am using a Kendo UI AutoComplete widget and up until now (2022-02-02), this is the only thing that works, and this problem has bugged me for years.

Not able to upvote, as don't have the points:-/

I get Google's wish to provide a good and useful UX for end users, but as developers, we need to be able to say that sometimes, it isn't what we want, at least in our humble opinions. A fine example is when the autofill in Google Chrome obscures the AutoComplete options.