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

either for reference, or so you dont reinvent the wheel, jqueryui's autocomplete plugin is excellent, and has this exact feature (it is of course optional, and when in use, you can set the delay)... — davin
– davin, Commented Jan 30, 2011 at 10:01

ThiefMaster · Accepted Answer · 2011-01-30 09:53:42Z

7

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

answered Jan 30, 2011 at 9:53

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2013-02-27 09:26:37Z

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!');
}

edited Feb 27, 2013 at 9:26

CommunityBot

11 silver badge

answered Jan 30, 2011 at 10:10

Marek Tuchalski

4892 silver badges8 bronze badges

2 Comments

ThiefMaster Over a year ago

You are polluting the global scope with keyUpTime and keyUpTimeout

Fred Over a year ago

Key events won't trigger if you right-click and select Paste in the context menu.

Martin Christmann · Accepted Answer · 2013-03-04 09:33:56Z

2

There is another jquery plugin for this. It works fine for me a link

answered Mar 4, 2013 at 9:33

Martin Christmann

2,4882 gold badges21 silver badges17 bronze badges

Collectives™ on Stack Overflow

Delay ajax call on key input in jQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related