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
25 Answers
autocomplete="off"
doesn't work anymore. The only thing which works from 2019 is
3autocomplete="new-password"
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 type="search" name="dummy_location" style='display: none;'>
<input 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";
}As of early 2022 this seems to work:
autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" spellcheck="false"It is the technique used on the google home page search box.
1autocomplete="off" to autocomplete="random-value". This is the temporary fix for now.
try this , this works for chrome
autocomplete="chrome-off"
