jQuery event upon selection of a suggested item on a text box?

Question

I'd like to run a function upon each modification of a textbox control as soon as the user is typing. the event .keyup() is fine for most of the cases.

However, browsers (like Chrome or Firefox) may suggest autocompletion entries for textbox controls (probably because the @name or @id of the input control is known).

Unfortunately, I can't have any of the below events fired when "clicking on a suggested entry". ( .keyup() fires when selected with keyboard )

$('input#email')
  .click(function() { console.log('click'); })
  .keyup(function() { console.log('keyup'); })
  .keydown(function() { console.log('keydown'); })
  .change(function() { console.log('change'); })
  .focus(function() { console.log('focus'); })
  .blur(function() { console.log('blur'); });

As much as possible, I'd like to avoid using a setInterval() periodical check.

Is there a way to detect this "select a suggestion" event ?

Answer 1

bind propertychange event:

$('input').bind('input propertychange', function() { 

    var input = this.value.trim();
    [...]   

});

Answer 2

The short answer is no, there is no event for detecting a suggestion selection. You could try looking at DOM mutation observers but I'm uncertain if these cover attribute changes, and there is little support for this API so far anyway.

So if you really need to handle this case then I think setInterval is your only option.

Edit: 3 years later you can use propertychange with jQuery as in the new accepted answer (which I assume uses mutation observers under the hood).

Answer 3

alternative solution disable autocomplete and handle other events like keyup,keydown etc

<input type="text" name="foo" autocomplete="off" />