Delay ajax call on key input in jQuery

Question

I am building an auto-complete like script for text inputs. In order to avoid multiple unnecessary ajax calls, I would like to initiate ajax calls only after the user stopped typing text for 1 second. That way I will save some overhead calls for every key pressed. How can I achieve this using jQuery?

Thanks,

Joel

Answer 1

Use the debounce plugin or the - better-documented - doTimeout plugin.

Answer 2

You can try something like this. I wasn't playing with above yet. Just using plain js.

var keyUpTime = 1000; // 1 sec
var keyUpTimeout = null;
$('input[type=text]').keyup( function(e) {
    clearTimeout(keyUpTimeout);
    keyUpTimeout = setTimeout(function() { sendAjax(); }, keyUpTime);
});
function sendAjax() {
    alert('Send it!');
}