I'm trying to create a jQuery autoplete for an application:

$("#search-input").on('keyup', function() {
    search = $(this).val();
    autoplete_div = $(".autoplete")
    $.get('/ajax/search/', {'search': search,}, function(response){
        autoplete_div.html(response)
    });
});

What would I need to add to the above code to add a 400ms delay?

I'm trying to create a jQuery autoplete for an application:

$("#search-input").on('keyup', function() {
    search = $(this).val();
    autoplete_div = $(".autoplete")
    $.get('/ajax/search/', {'search': search,}, function(response){
        autoplete_div.html(response)
    });
});

What would I need to add to the above code to add a 400ms delay?

• javascript
• jquery

• well, considering that the code snippet uses deprecated features such as live() I wouldn't add anything to it. I'd start over – Stephen Thomas Commented Mar 21, 2014 at 20:36
• you shouldn't use live but .on() (depending jQuery version) and shouldn't use keydown event but keyup instead and then delay request using a timeout and debounce it using clearTimeout – A. Wolff Commented Mar 21, 2014 at 20:36
• @A.Wolff I made those two changes. How would I add a timeout and then clearTimeout? Could you please show me in an answer? – David542 Commented Mar 21, 2014 at 20:40
• Beware here you aren't delegating event as your original post was using live. See DOC for syntax to delegate event using .on() or check my answer – A. Wolff Commented Mar 21, 2014 at 20:54

3 Answers 3

Use

setTimeout(function() {
    // your code here
}, 400);

setTimeout is a method provided by the browser's window object.

A more plete example that cancels a timer if already set using clearTimeout would be:

var myTimer = 0;

$("#search-input").on('keydown', function() {
    search = $(this).val();

    // cancel any previously-set timer
    if (myTimer) {
        clearTimeout(myTimer);
    }

    myTimer = setTimeout(function() {
        autoplete_div = $(".autoplete")
        $.get('/ajax/search/', {'search': search,}, function(response){
            autoplete_div.html(response)
        });
    }, 400);
});

Also note use of on instead of the deprecated live.

Your code should look like this: (for jQuery 1.7+)

$(document).on('keyup', "#search-input", function () {
    clearTimeout($(this).data('timeout'));
    var _self = this;
    $(this).data('timeout', setTimeout(function () {
        $.get('/ajax/search/', {
            search: _self.value
        }, function (response) {
            $(".autoplete").html(response);
        });
    }, 400));
});

If using older jQuery version, use live() or better delegate(). BTW, you should bind it to closest static container, not document.

You can use the setTimeout() function to delay the start of the expression, in this case, your function. Beware that this does not delay processing beyond this code. It will only delay the start of this function, while continuing to process code after the function.

$("#search-input").live('keydown', setTimeout(function() {
    search = $(this).val();
    autoplete_div = $(".autoplete")
    $.get('/ajax/search/', {'search': search,}, function(response){
        autoplete_div.html(response)
    })
},400));

EDITED: to correct misplaced parentheses.