html catch event when user is typing into a text input

Matt picture Matt · Dec 11, 2012 · Viewed 44.9k times · Source

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 grid. At the top of the form the user can type the name of the contact they are trying to find. Once there is more than 1 character in the text input I want to start searching for contacts in the system which contain those characters entered by the user. As they keep typing the data changes.

All it is really is a simple type ahead type functionality (or autocomplete) but I want to fire off data in a different control.

I can get the text out of the input once the input has lost focus fine, but this doesnt fit the situation.

Any ideas?

Thanks

Answer

adeneo picture adeneo · Dec 11, 2012

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.