Explosion Pills Explosion Pills - 5 months ago 17
jQuery Question

Any event triggered on autocomplete?

I have a pretty simple form. When the user types in an input field, I want to update what they've typed somewhere else on the page. This all works fine. I've bound the update to the

keyup
,
change
and
click
events.

The only problem is if you select an input from the browser's autocomplete box, it does not update. Is there any event that triggers when you select from autocomplete (it's apparently neither
change
nor
click
). Note that if you select from the autocomplete box and the blur the input field, the update will be triggered. I would like for it to be triggered as soon as the autocomplete .

See: http://jsfiddle.net/pYKKp/ (hopefully you have filled out a lot of forms in the past with an input named "email").

HTML:



<input name="email" />
<div id="whatever">&lt;whatever></div>


CSS:



div {
float: right;
}


Script:



$("input").on('keyup change click', function () {
var v = $(this).val();
if (v) {
$("#whatever").text(v);
}
else {
$("#whatever").text('<whatever>');
}
});

Answer

I recommending using monitorEvents. It's a function provide by the javascript console in both web inspector and firebug that prints out all events that are generated by an element. Here's an example of how you'd use it:

monitorEvents($("input")[0]);

In your case, both Firefox and Opera generate an input event when the user selects an item from the autocomplete drop down. In IE7-8 and Chrome a change event is produced after the user changes focus. Unfortunately chrome does not generates any similar events, so you are stuck with listening to blur events and manually checking if a text change has occurred.

Comments