Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>');      }  });  
like image 312
Explosion Pills Avatar asked Dec 17 '11 22:12

Explosion Pills


People also ask

Does autofill trigger onChange?

Autofill does not trigger onChange.

How do you trigger an event on click?

If you just need to trigger a click event, you can omit the line that begins with for( . @Parag: Read it again. The loop is to click the same link 50 times, which is what it does.

Can JavaScript trigger events?

HTML events are handled by JavaScript. When an event occurs, it requires some action to be taken. This action can be accomplished through JavaScript event handlers. In addition to JavaScript, jQuery which is equivalent to JavaScript in terms of functionality can also be used to trigger events in a HTML document.


1 Answers

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 a change event is produced after the user changes focus. The latest Chrome does generate a similar event.

A detailed browser compatibility chart can be found here:
https://developer.mozilla.org/en-US/docs/Web/Events/input

like image 142
Xavi Avatar answered Oct 14 '22 20:10

Xavi