jQuery event handler for input (type text)

Question

I was trying to prepare some functionality to filter and sort data returned from db via ajax and i cant figure out one problem.

Ive seen on many websites and web applications very interesting way of handling text input fields, it works the way that you type something in and while you are typing nothing happens but if you stop for like 3 seconds it fires up and conducts ajax request, so i started to experimenting with many inbuild jquery functions but none seem to work this way.

keyup fires up on every character you provide to the field therefore no go

change requires from you to click outside of field to fire up which is terrible solution

mouseleave doesnt work with text input fields, nothing happens when you leave input

mouseout well this one works, when i move mouse outside of field it fires up but it still require from user everytime he adjust his research to move mouse in and out which is even worst then change method

input, keypress, keydown works the same as keyup they just have cosmetic differences but method stay the same so no go

So method i would want to implement is the one that fires up some time after you stop typing and doesnt require any mouse move or clicking, though i have no clue how to approach it.

HTML

<input type="text" class="adjust" />

Javascript

$('.adjust').on('change', function() {
    alert('event has fired');
});

If someone is willing to help out, ive prepared some initial jsfiddle to experiment with:

http://jsfiddle.net/eag9e/

Answer 1

Try this...

var keyupTimeoutID = 0;

$('.adjust').on('input', function() {
    clearTimeout(keyupTimeoutID);
    keyupTimeoutID = setTimeout(function() {
        alert('event has fired');
    }, 1000);
});

jsfiddle example

It creates a timeout every time the value changes, clearing any previous timeouts. I set it to 1 second, but you can obviously change that to suit.