How to disable Autofill in angular material md-autocomplete

user_4911077 0
Viewed 2117

I want do disable browser's (Chrome's) Autofill feature for my md-autocomplete.
I have also read #2699 but since I do not have an input tag in my md-autocomplete, I do not know where to apply type="search"

Anybody already achieved this?

<div class="autocomplete" flex>
            <md-icon class="icon"  md-svg-icon="user"></md-icon>

            <md-autocomplete
                    md-no-cache="ctrl.noCache"
                    md-selected-item="ctrl.selectedUserItem"
                    md-search-text-change="ctrl.searchUserTextChange(ctrl.searchText)"
                    md-search-text="ctrl.searchUserText"
                    md-selected-item-change="ctrl.selectedUserItemChange(useritem)"
                    md-items="useritem in ctrl.querySearchUsers(ctrl.searchUserText)"
                    md-item-text="useritem.Name"
                    md-min-length="0"
                    md-menu-class="autocomplete-custom-template"
                    md-floating-label="Username">
                <md-item-template>
                 <span> {{useritem.Title}} </span>
                 <span> <strong> {{useritem.Name}}</strong>, </span>
               </md-item-template>
            </md-autocomplete>
        </div>
angular-material angularjs
4 Answers

You can use the below code in your controller page if you are using angularjs. By default md-autocomplete will have an attribute called auto complete which set autcomplete=="off". So please override with the below code . But one thing if you have two md-autocomplete in the same template this will not work. 

$('input').attr("autocomplete","none");
user_13495440

It works when we set autocomplete to 'no' for the input element wrapped inside the <md-autocomplete>. 

  <md-autocomplete
                md-input-type = "search"
                md-input-name="country"
                onmouseover="this.children[0].children[0].children[1].autocomplete='no'"
                >
            </md-autocomplete>

Not the elegant one but it does seem to work.

user_28470610

It just worked for me:

<md-autocomplete
...
        onfocus="this.querySelector('input').autocomplete='no'"
>
user_42383230
Related