javascript - Key event doesnt trigger in Firefox on Android when word suggestion is on

Question

I have a search field that triggers an autocomplete search while typing. I have it trigger on keyup. This works perfectly in most browsers, but in Firefox on Android, this does not work. It seems like the keyup event is not triggered while typing. This only happens if word suggestions is turned on in the Android keyboard settings.

I see on Google search that the autocomplete search works there for the same setup, so it is obviously possible to do. I wonder how? Is it a special event I need to listen to for this to work?

Additionally I have tried to listen to the events change, keydown and keypress, but none is triggered.

HTML:

<input type="text" id="searchField" 
 autocomplete="off" spellcheck="false" autocorrect="off" />

jQuery event binding:

  $('#searchField').keyup(function (e) {
    var searchValue = $(this).val();
    searchApi._executeAutocomplete(searchValue);
  });

Note:
Sometimes, the key event is triggered, which is typically hitting a key that is not resulting in the process of forming a word. The most obvious here is Enter, which always triggers. Another is Space, which triggers because no word contain a space since space is the definition of a word completed. Backspace triggers if the the last character deleted was not within a word. This means it triggers if you just deleted the last remaining letter of a word (so it is the start of the field, or cursor following a space), but not if you deleted some characters at the end of a word where the cursor is still immediately following a letter. Basically, the key event is not triggered if the key press results in some kind of word suggestion from the keyboard app.

As a side note, I can say that everything works fine in Chrome on the same device.

Answer 1

You can use the input event instead, that worked for me in Firefox on Android. You could bind event handlers to both input and keyup events for backwards compatibility, but in most modern browsers this will fire both:

$('#searchField').bind('input keyup', function(e){
    var searchValue = $(this).val();
    searchApi._executeAutocomplete(searchValue);
});

Example here: http://jsfiddle.net/JQ928/3/