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

If you have not referred this link https://stackoverflow.com/questions/15738259/disabling-chrome-autofill, you can check if this answers your need — NewBee, Dec 30 '20 at 09:31
@NewBee Though these two questions are quite similar, none of the answers on that one actually work on my case. Last update was for September: 2020 but even that does not work for me, as mentioned on my original query. — Nick Arnie, Dec 30 '20 at 10:05

score 2 · Answer 1 · answered Dec 30 '20 at 09:49

2

autocomplete="off"

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

autocomplete="new-password"

answered Dec 30 '20 at 09:49

Ejilarasan J

310
1
3
11

As per my original post, I've already tried this. This is equivalent to passing a random value. It disables autofill but does show a chrome autocomplete dropdown. – Nick Arnie Dec 30 '20 at 10:01
https://www.jqueryscript.net/form/Disable-Chrome-Autofill-Autocomplete-jQuery.html check this jquery plugin and let me know – Ejilarasan J Dec 30 '20 at 10:21
Thank you for your comment. As I mentioned on my original post 'I cannot use random name attributes since I am performing ajax requests for my own jquery-ui autocomplete' – Nick Arnie Dec 30 '20 at 12:53

score 1 · Answer 2 · answered Jan 13 '21 at 08:19

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";
}

score 1 · Answer 3 · edited Jan 09 '22 at 00:45

1

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.

edited Jan 09 '22 at 00:45

Robo

660
5
22

answered Jan 07 '22 at 18:49

Ryan

491
6
13

Confirmed, for a thing that's a combobox the role="combobox" _does_ seem to be the thing that works at the moment. – Paul-Jan Mar 18 '22 at 10:16

score 0 · Answer 4 · answered Dec 30 '20 at 09:21

0

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

answered Dec 30 '20 at 09:21

stillKonfuzed

402
3
10

As per my original post, I've already tried this. This is equivalent to `autocomplete="disabled"` whitch is invalid. It disables autofill but does show a chrome autocomplete dropdown. – Nick Arnie Dec 30 '20 at 10:02

score 0 · Answer 5 · answered Dec 30 '20 at 09:29

0

try this , this works for chrome

autocomplete="chrome-off"

answered Dec 30 '20 at 09:29

Ahmed Sunny

2,160
1
21
27

As per my original post, I've already tried this. It disables autofill but does show a chrome autocomplete dropdown. – Nick Arnie Dec 30 '20 at 10:00

How to disable autocomplete and autofill for chrome / jquery

5 Answers5