Dynamically dismiss autofill menu of

Question

I am trying to implement an textbox component. It should allow user to fill the input with autofill menu when it is blank; and disable the autofill if there are any texts in the input, and dismiss the autofill menu if it is displayed at the same time.

I've tried to set the autocomplete attribute of the input when the change event is fired. The value can be flipped correctly, but turning the value off does not dismiss the autofill menu. Wondering if there are any javascript solutions to do it.

html:

<input id="addrBox" name="addrBox" autocomplete="off" class placeholder="Start typing your address to get auto-suggestions…">

js:

$('#addrBox').on('click focus change keydown', function(){
    var val = $('#addrBox').val(); 
    if(val.length){
        $('#addrBox').attr('autocomplete', 'off')
    }
    else{
        $('#addrBox').attr('autocomplete', 'on')
    }
})

Screen shot:
I click the empty input box, it shows the autofill menu, which is expected. Then I continue to enter 1, the autocomplete attribute is turned off, however the menu is still there.

have you tried `element.setAttribute('autocomplete', 'off');`? — Robert Parham, Sep 20 '16 at 01:07
@RobertParham Thanks Robert. I've added the code and screenshot. — shaosh, Sep 20 '16 at 17:40
What you're looking at is not standard browser autocomplete, that's a Chrome plugin called Autofill. You can't disable it with JS but there is a workaround: http://stackoverflow.com/questions/15738259/disabling-chrome-autofill — Robert Parham, Sep 20 '16 at 17:51
@RobertParham It seems that autocomplete="new-password" solution works for me. Thanks for the link! — shaosh, Sep 20 '16 at 19:33

score 1 · Accepted Answer · edited May 23 '17 at 12:06

Figured out how to dismiss the autofill the menu. It can be done by setting autocomplete to new-password, instead of off.

$('#addrBox').on('mouseup keyup', function(){
    var val = $('#addrBox').val(); 
    val = val.length;
    if(val === 0){
        $('#addrBox').attr('autocomplete', 'on');
    }
    else{
        $('#addrBox').attr('autocomplete', 'new-password');
    }
}).on('mousedown keydown', function(){
    var val = $('#addrBox').val(); 
    var length = val.length;
    if(!length){
        $('#addrBox').attr('autocomplete', 'new-password');
    }    
})

The reference is https://stackoverflow.com/a/36584903/2177408

Dynamically dismiss autofill menu of

1 Answers1