Question

170

How do I make my live jQuery search wait a second before performing the search?

rated 0 times [ 177] [ 7] / answers: 1 / hits: 23920 / 15 Years ago, thu, july 23, 2009, 12:00:00

I've got a search input which sends data from an input to a php file as I type. The php file does a search on my database and shows up a list of search options. You know, the ajax style live searching.

My problem is, if you type something really fast, it might just conduct a search off of the first 1 or 2 letters even though another 10 have been typed. This causes a few problems.

My jQuery looks a bit like this:

$(document).ready(function(){

  $('#searchMe').keyup(function(){

    lookup(this.value);

  });

});

and

function lookup(searchinput) {



  if(searchinput.length == 0) {

    // Hide the suggestion box.

    $(#suggestions).hide();

  } else {



    $('#loading').fadeIn();



    $.post(/RPCsearch.php, {queryString: +searchinput+}, function(data){

      if(data.length > 0) {

        $(#suggestions).html(data).show();

        $('#loading').fadeOut();

      }

    });

  }

} // lookup

So I'm just curious, how can I make it so that my script waits until I've finished typing before running the function? My logic says something like if a key hasn't been pressed for 200 micro seconds, run the function, otherwise hold up a bit.

How is this done?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayla

Add To Favorites

Follow

Total Points: 681

Total Questions: 102

Total Answers: 108

Location: Marshall Islands

Member since Tue, Sep 21, 2021

3 Years ago

tayla questions

1 Problem embedding tiktok video into angular 7

Fri, Mar 5, 21, 00:00, 3 Years ago

1 Lodash - How to merge two arrays of objects based on key?

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Horizontal scroll bar is appearing after using slick slider in the webpage

Wed, Oct 21, 20, 00:00, 4 Years ago

1 Jest: `querySelector` returns null in test of a ReactJS component

Sat, Jul 4, 20, 00:00, 4 Years ago

1 setTimeout with Promises

Thu, Apr 9, 20, 00:00, 4 Years ago

View All

answered 15 Years ago jameson · Accepted Answer

Easy, using setTimeout. Of course you only want one timer going at once, so it's important to use clearTimeout at the beginning of the function...

$(function() {

  var timer;

  $(#searchMe).keyup(function() {

    clearTimeout(timer);

    var ms = 200; // milliseconds

    var val = this.value;

    timer = setTimeout(function() {

      lookup(val);

    }, ms);

  });

});