html catch event when user is typing into a text input

Question

Im just wondering how I go about catching the event when the user is typing into a text input field on my web application.

Scenario is, I have a contacts listing gri

Answer 1

I would use the 'input' and 'propertychange' events. They fire on cut and paste via the mouse as well.

Also, consider debouncing your event handler so that fast typists are not penalized by many DOM refreshes.

Answer 2

see my try:

you should put .combo after every .input classes.

.input is a textbox and .combo is a div

$(".input").keyup(function(){
    var val = this.value;
    if (val.length > 1) {
        //you search method...
    }
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});

$(".input").blur(function(){
    $(this).next(".combo").hide();
});

Answer 3

Use the keyup event to capture the value as the user types, and do whatever it is you do to search for that value :

$('input').on('keyup', function() {
     if (this.value.length > 1) {
          // do search for this.value here
     }
});

Another option would be the input event, that catches any input, from keys, pasting etc.

Answer 4

Why not use the HTML oninput event?

<input type="text" oninput="searchContacts()">