Perform AJAX search one second after multiple keydown events

Question

So I am making a autocomplete with jquery. Ajax is used to get a heavy xml file from remote location. If I search for ex. "Two and a half men" it does about 16 querys (for every letter typed except the 3 first, look the code) with ajax.

I want it to do the Ajax request a second after user has pressed the last key so it will do one query instead of 16.

So if user presses another key before it's been 1 second since the last keydown event, it won't do the query yet.

<script>
    $(document).ready(function(){
        $('#tv_search').keydown(function(){
            var search = $(this).val();
            if(search.length >= 3)
            {
                $.ajax({
                  type: "GET",
                  url: "search.php",
                  data: {show : search, key : '890k4900k0ll' }
                }).done(function(msg){
                    $('#t').html(msg);
                });
            }
        });
    });
</script>

Search for series: <input type='text' name='tv_search' id='tv_search'>

Any ideas?

Why would you ever search for Two and a half men? – Ben Racicot Jul 23 '15 at 20:03 — Ben Racicot, Jul 23 '15 at 20:03

score 7 · Accepted Answer · edited Oct 27 '17 at 04:47

7

You could just use a timeout, and clear it every time a key is pressed :

$(document).ready(function() {
    $('#tv_search').on('keyup', function() {
        clearTimeout($(this).data('timer'));
        var search = this.value;
        if (search.length >= 3) {
            $(this).data('timer', setTimeout(function() {
                $.ajax({
                    type: "GET",
                    url: "search.php",
                    data: {
                        show: search,
                        key: '890k4900k0ll'
                    }
                }).done(function(msg) {
                    $('#t').html(msg);
                });
            }, 1000));
        }
    });
});

edited Oct 27 '17 at 04:47

Ian Kemp

28,293
19
112
138

answered Dec 14 '12 at 04:25

adeneo

312,895
29
395
388

Thank you! Worked flawlessly! Bobthyasian, it is working for me. – Crazywako Dec 14 '12 at 04:34
Should work just fine, as long as there is a search.php file and the correct elements exists in the DOM etc. The neat advantage is that it does'nt need globals. – adeneo Dec 14 '12 at 04:39
See this delay_method that allows you to give labels to execution queues http://stackoverflow.com/a/30503848/1834212 – Miguel May 29 '15 at 15:59
May you please tell me what `key: '890k4900k0ll'` suppose to be? I think this `show: search` can be enough. – stack Jun 22 '16 at 13:39
2

@stack - it's from the question above, it's the data the OP is sending, I just copied it, and can't really tell wether or not the OP can leave out the key or not ? – adeneo Jun 22 '16 at 14:15

Talha Ahmed Khan · Answer 2 · 2012-12-14T04:48:59.887

To avoid multiple AJAX request generating at each key-press try to use setTimeout() and clearTimeout() methods in a way that you cancel the last timeout and start a new timeout by calling setTimeout() after clearing it. setTimeout() method should contain the AJAX request which executes after quarter of second (250 millis) user press a key.

I also abort() the request if its available.

var timeOut = null,
    myXHR = null;
$(document).ready(function(){
    $('#tv_search').keydown(function(){
        // It will clear the setTimeOut activity if valid.
        if(timeOut) clearTimeout(timeOut);

        var search = $(this).val();
        if(search.length >= 3)
        {
            timeOut = setTimeout(function(){
              // Cancel the last request if valid
              if(myXHR) myXHR.abort();

              myXHR = $.ajax({
                type: "GET",
                url: "search.php",
                data: {show : search, key : '890k4900k0ll' }
              }).done(function(msg){
                  $('#t').html(msg);
              });
            }, 250);// wait for quarter second.
        }
    });
});

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

I have a solution that allows you to delay any method you call, avoiding repetitive calls, that would be not used at all!

https://stackoverflow.com/a/30503848/1834212

edited May 23 '17 at 11:53

Community

1
1

answered May 29 '15 at 12:40

Miguel

3,349
2
32
28

score 0 · Answer 4 · answered Nov 24 '16 at 12:26

quit simple solution :

<script>
$(document).ready(function(){
var mytimer;
    $('#tv_search').keydown(function(){
       clearTimeout(mytimer);
        var search = $(this).val();
        if(search.length >= 3)
        {
           mytimer = setTimeout(function(){
             $.ajax({
              type: "GET",
              url: "search.php",
              data: {show : search, key : '890k4900k0ll' }
            }).done(function(msg){
                $('#t').html(msg);
            });
         }, 1000);
        }
    });
});

Where 'mytimer' must be global variable, simply clear previous 'mytimer' on every event call. It will only execute latest call in interval of 1 second.

Perform AJAX search one second after multiple keydown events

4 Answers4

Linked