Hide existing Chrome/Firefox autofill dropdown through JavaScript

Question

I would like to hide the Chrome autofill dropdown when user hovers on my topbar menus, because the menu dropdown appears below the autofill dropdown.

The scenario is:

1. user clicks the input box, the autofill dropdown appears.
2. user moves mouse to topbar menu, menu dropdown appears, but it is below the autofill dropdown
3. So, i want to hide the autofill dropdown through JS when user moves mouse to my topbar menu.

Trial 1

Disable the autofill temporarily, and enable it when user move mouse out of the topbar menu.

$('.menu-dropdown').on('mouseenter', function() {
  $('input').attr('autocomplete', 'off');
});

Althought it disables the autofill, the existing autofill dropdown does not hide immediately. I need to click somewhere else to hide it. After that, the autofill is disabled.

Trial 2

Trigger click event on some other element (use the real mouse, click any where on the page will hide the autofill dropdown):

$('.menu-dropdown').on('mouseenter', function() {
  $('#someOtherElement').click();
});

It is not working.

Trial 3

Trigger the ESC event:

var esc = $.Event("keydown", { keyCode: 27 });
$('.menu-dropdown').on('mouseenter', function() {
  $("body").trigger(esc);
});

Not working as well.

Please kindly help. Thanks.

---

Solution

Thanks to @Focki, here is the solution: disable the input autofill initially, only enable it when focused. When blured, disable it again.

// For Firefox: use `removeAttr`, instead of `attr('autocomplete', 'off'), 
$('input').removeAttr('autocomplete').focus(function() {      
  $(this).attr('autocomplete', 'on'); 
}).blur(function() {    
  $(this).removeAttr('autocomplete'); 
});

// Important: When user moves mouse to the topbar dropdown, trigger the blur event on input
$('.dropdown').on('mouseenter', function () {
  $('input').trigger('blur');
});

Answer 1

Twisting the order can work on this issue. Set the Input´s autocomplete to off by default and enable it onfocus

$('input').on('focus', function() {
  $(this).attr('autocomplete', 'on');
});