jQuery: events when input changes

Question

I have a select that I want to run various functions on depending on what's selected. I've also used the flexselect plugin http://rmm5t.github.com/jquery-flexselect/ to transform the select box into a combo box. The result is an input box.

I want to run a function when the input box text changes, not on blur, but right away. I don't see any way to do this. I can't just do a keyup because oftentimes the selection happens from the flexselect dropdown, and is not typed. Using the change event requires the inputbox to blur, this is not behavior that the user expects.

Is there a solution to this problem?

Thanks!

Answer 1

why don't you use a combination of onblur and onkeyup?

Of course you could also create a timer (window.setTimeout) - not really a nice or encourages way to handle this, but it should work.

Answer 2

note that jquery bind() allows multiple events.

 $('#selector').bind('keyup mouseup change',function(e){
       alert(e.type);
});

Answer 3

This is a hack but could you modify the flexselect.js file to raise a custom event when it changes the textbox's value. After any place in the file that calls "this.input.val(" (like line 231) insert: trigger("myCustomEvent"); then from your existing code bind to it:

$('#selector').bind('myCustomEvent',function(){
       alert('myCustomEvent');
});