0

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

Nick Kongk.
  • 39
  • 1
  • 6
  • 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 Kongk. Dec 30 '20 at 10:05

4 Answers4

1

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";
}
Nick Kongk.
  • 39
  • 1
  • 6
0

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

stillKonfuzed
  • 207
  • 1
  • 9
  • 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 Kongk. Dec 30 '20 at 10:02
0

try this , this works for chrome

autocomplete="chrome-off"
Ahmed Sunny
  • 1,897
  • 1
  • 19
  • 20
  • As per my original post, I've already tried this. It disables autofill but does show a chrome autocomplete dropdown. – Nick Kongk. Dec 30 '20 at 10:00
0

autocomplete="off"

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

autocomplete="new-password"

Ejilarasan J
  • 171
  • 1
  • 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 Kongk. 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 Kongk. Dec 30 '20 at 12:53