8

Due to environment I would like to constrain this to something small and concise rather than a plugin, unless it's an extension that can be put inline aside other jquery code.

I have this code:

$("#txtSearch").live('keyup', function () {
    LoadList(1)     
});

I'd like to add a delay such that if a user must wait (as in stop typing) 0.5 seconds before a call is executed.

So basically if letters are typed with less than X time between consecutive keystrokes no ajax call occurs.

Is there a tiny concise way to do this with Jquery?

Joshua Enfield
  • 17,642
  • 10
  • 51
  • 98

3 Answers3

23

Set a timeout and clear it on every keystroke before applying a new one:

var timeout;
$("body").on('keyup', '#txtSearch', function () {
    window.clearTimeout(timeout);
    timeout = window.setTimeout(function(){
       LoadList(1); 
    },500);

});

example: http://jsfiddle.net/niklasvh/KgRjJ/

Niklas
  • 29,752
  • 5
  • 50
  • 71
  • 1
    Thank you! I googled for a while and found nothing helpful until this. – Benjamin Aug 23 '12 at 19:07
  • 1
    According to http://api.jquery.com/live/ -- As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). – Lingnik Feb 05 '15 at 18:31
  • @Lingnik Correct, I've updated my answer accordingly. – Niklas Feb 05 '15 at 18:45
11
$("#txtSearch").live('keyup', function () {
    var value=$("#txtSearch").val();
    setTimeout(function(){
          if ($("#txtSearch").val() == value)
          {
                 LoadList(1)      
          }
    },500);
});
genesis
  • 50,477
  • 20
  • 96
  • 125
  • 3
    For me it loaded the list twice while the next answer with clearTimeout worked perfectly and looked cleaner. – balrok Nov 16 '13 at 19:53
  • This indeed actually triggers the function twice, because the previous timeout is not being reset. – user1226868 Feb 19 '17 at 20:56
3

You can use the autocomplete widget in jQueryUI, which has a delay option:

The delay in milliseconds the Autocomplete waits after a keystroke to activate itself. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.

http://jqueryui.com/demos/autocomplete

Nabab
  • 2,608
  • 1
  • 19
  • 32
  • not necessary. look on my answer.. And, OP wanted to do it without plugins, but you noted it as I see :D – genesis Jun 20 '11 at 21:19
  • Actually I should have mentioned Jquery UI is the one plugin available :) – Joshua Enfield Jun 20 '11 at 21:25
  • Although - autocomplete on the text field isn't technically what I'm doing. I am populating a list of items in a div from a ajax call update rather than dropping down a list from the text box as autocomplete. – Joshua Enfield Jun 20 '11 at 21:27
  • You can do that too with autocomplete just by changing the source option: http://jqueryui.com/demos/autocomplete/#option-source – Nabab Jun 21 '11 at 00:00