How do i bind onchange event of a TextBox using JQuery?

Question

How can i bind an OnChange event of a TextBox to function using JQuery?

Am trying this and its failing ;

   $(document).ready(function(){
        $("input#tags").bind("change",autoFill);
          });

 function autoFill(){
           $("#tags").autocomplete("/taglookup/", {
     width: 320,
     max: 4,
     highlight: false,
     multiple: true,
     multipleSeparator:",",
     scroll: true,
     scrollHeight: 300,
     delay: 10
         });
       }

NB: I want to implement a Tag TextBox like the one for stackoverflow which detects OnChange events and calls AJAX functions when a user types in. - ideas

Gath

Answer 1

You're looking for keydown/press/up

$("#inputID").keydown(function(event) {
    alert(event.keyCode);
});

or using bind $("#inputID").bind('onkeydown', ...

http://docs.jquery.com/Events

Answer 2

I 2nd Chad Grant's answer and also submit this blog article for your viewing pleasure.

http://themaingate.net/dev/javascript/jquerys-annoying-edits-to-onchange-behavior

Answer 3

You must change the event name from "change" to "onchange":

$(document).ready(function(){
        $("input#tags").bind("onchange", autoFill);
          });

or use the shortcut binder method change:

$(document).ready(function(){
        $("input#tags").change(autoFill);
          });

Note that the onchange event usually fires when the user leave the input, so for auto-complete you better use the keydown event.

Answer 4

Here's a clue why an onchange() call might not fire your bound function:

http://jehiah.cz/archive/firing-javascript-events-properly