Detect when autocomplete is visible

Question

I am catching the enter on keypress in my form to prevent it from submitting the form unless it is the last input; otherwise, it acts as a tab (finds the next input and focuses on it).

Any ideas on how to not trigger event.preventDefault() if the browser auto-complete is being selected?

Answer 1

I don't know if you're using a specific plug-in or if you have the ability to easily modify the autocomplete source code, but I would attempt to do something like this:

• Find the function that is used to trigger the display of the autocomplete
• Set a boolean value when the autocomplete's visibility is triggered (true for visible, false for not)
• Check the status of the boolean value whenever you're attempting to catch enter (or tab)

Note that you would have to make the boolean value publicly accessible in the context of the autocomplete object.

Again, without knowing the specifics if your implementation it's difficult to say how best to change it but it could work something like this:

var Autocomplete = {
  bIsVisible: false,
  display: function() {
    // toggle visibility of the autocomplete
    this.bIsVisible = !this.bIsVisible;
  }
}

You would could then utilize it by doing something like this:

alert(Autocomplete.bIsVisible); // returns false
Autocomplete.display(); // triggers the display of the autocomplete
alert(Autocomplete.bIsVisible); // returns true