61

I'm just using simple input containers such as this

<md-input-container class="md-block" flex-gt-sm >
    <label>Name</label>
    <input md-maxlength="30" name="name" ng-model="name" />
</md-input-container>

The input field is suggesting previously entered values which is obscuring some important interface elements and also really not necessary in my case. Is there any way to disable the suggestions?

Bryce Rogers
  • 668
  • 1
  • 5
  • 8

7 Answers7

135

Add autocomplete="off" to the input element, just like this:

<input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

See this for your reference.

Bharat Gupta
  • 2,628
  • 1
  • 19
  • 27
  • Thanks heaps mate! Worked straight away. – Bryce Rogers Feb 17 '16 at 22:13
  • 7
    This is not working in Chrome 74. Modern browsers ignore autocomplete attribute on fields with common names: name, surname, email, address etc. I get rid of autocomplete using `autocomplete="disabled"`, even if `disabled` should not be a valid option. It seems that everything you write instead of `off` is working... weird. – Luciano May 25 '19 at 09:59
  • 1
    'disabled' not help me, so I give to this input a unique name, and this is help. – offset Dec 11 '19 at 11:17
  • 1
    @Luciano but sometimes its not working when I add in all fields then not working when I skip some field its working and somewhere completely not working – VIKAS KOHLI Jul 21 '20 at 13:14
  • 1
    See post below from @curiousBoy for the best way – neilakapete Mar 08 '22 at 15:52
23

Browsers often ignore autocomplete="off" for inputs that do not have a name attribute or have its value set to be common for autofill feature (name, email, street, country ...).

In my case, it is enough to set the input an unusual name.

<input type="text" name="someUnusualName" autocomplete="off">
hovado
  • 4,474
  • 1
  • 24
  • 30
16

Add autocomplete="off" to the input but for modern browser use autocomplete="nope"

Legacy browser

<input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

Modern browser

<input md-maxlength="30" name="name" ng-model="name" autocomplete="nope" />
Mohamed TEBANI
  • 168
  • 1
  • 5
13

Just in case someone had same experience with me (as the current answer did not work on my chrome), I used like below and it worked:

<input md-maxlength="30" name="name" ng-model="name" autocomplete="new-password" />
curiousBoy
  • 6,334
  • 5
  • 48
  • 56
3

New Browsers seems to look at the id field or name field to determine what you are looking for with autofill. I started spelling things backwards when I wanted to turn autofill off.

The problem tag - autofill popup

<input id='cp_state_i' required />

The fix - not autofill popup

<input id='cp_etats_i' required />

My issue was that I was using an autocomplete options list for the states. The popup was a problem. This was my fix, might help you.

Another thing that seems to work on some text fields is this

<input autocomplete='new-password'/>

I remove type='text and it would stop popping up things. but for whatever reason it didnt work on everything just some things.

I am not sure why Browsers wont honor autocomplete='off' any longer. It makes for some headaches when dealing with CRUD and other reasonable operations other than simply login forms.

GraveyTrain016
  • 31
  • 1
  • 3
1
<input type="text" id="example" placeholder="" matInput  [(ngModel)]="item.productDescription" [matAutocomplete]="product" [matAutocompleteDisabled]="condition"/>

just use [matAutocompleteDisabled] property with a valid condition.

Rashidul Alam Oli
  • 32
  • 5
0

Just use input type="search" you will be fine. Tested on Google Chrome Version 92.0.4515.107 (Official Build) (arm64)

Eg: <input type="search" name="namesearch" id="search-cust" placeholder="Shop Name" style="width:170px" />

Sahan Pasindu Nirmal
  • 433
  • 4
  • 13
  • 36