php / jquery搜索框

I'm trying to implement a search box using php and jquery (the seach results are coming from a database). What I want to do is that as the user type into the search box, a query is made to find the data that contains the keyword the user entered into the search box. The problem I'm having is that I have something like this:

$("#my_search_box").keyup(function(){

    retrieve_results($(this).val());    

});

The problem with doing this is that, the function retrieve_results() is called every time the user is done typing (of course, cause that's what the keyup is there for). Therefore, this can get very slow because if the user type a word that has like 10 characters, the retrieve_results() function gets called 10 times in a row. Also, I should mention that inside my retrieve_results() function, I'm doing an Ajax request using jQuery $.ajax to get the results. So my question is the following:

How do I make it so that my function retrieve_results() doesn't get executed everytime the user stops typing (every time the key is up). I want to keep that functionality though, I don't want the user to click on a "Search" button or something. I just would like my retrieve_results() function to get called only once when the user is done entering all the keywords (not everytime the user enters a letter or something)

Thank you

Ideally, you only want the search to fire for the very last character the user types. The best way to do this is to give him enough time to continually type, and if he pauses (even to think), run the search. Using setTimeout by itself won't work because even that would fire multiple times. You have to clear the timeout by using clearTimeout.

You can use the following to achieve the desired effect:

$(document).ready(function() {
    var timeout,
        $search_box = $('#my_search_box');

    $search_box.keyup(function() {
        if (timeout) {
            clearTimeout(timeout);
        }

        timeout = setTimeout(function() {
            search();
        }, 1000);
    });

    function search() {
        var search_txt = $search_box.val();
    }
});

Here's what's happening: We assign the setTimeout timer to a variable, which must be declared above your keyup function, and check that variable each time keyup fires. If there's an existing setTimeout in progress, clear it out so that it won't fire the search() function and create a new timer set to wait a specified number of milliseconds (1000 in my example).

See the following JSFiddle for demo: http://jsfiddle.net/highwayoflife/WE4Fr/

You could start a timmer...let`s say...after first key...if the interval is greater than 2 sec (between keys) do a search else wait http://api.jquery.com/delay/

EXAMPLE(from To delay JavaScript function call using jQuery):

  $("#button").bind("sample",function() {
      sample();
    });

    $("#button").click(function(){
      $(this).delay(2000).trigger("sample");
    });

Didn't have time to test with delay

ALTERNATIVE (tested) done in 3 min it`s late (2:12 AM my local time)

$("#my_search_box").keyup(function(){
            setTimeout(search, 30000);
});
function search(){
        alert('ok');
}

I would recommend using either the delay method in jQuery or the setTimeout() function in JavaScript where the interval would be reset to the original interval every time the keyup method executes. Here is a brief explanation of the setTimeout() method and several other timer methods found in JavaScript.

Something Like this should do it. You create a global variable to store the query, and another one to know if enough time has passed for a new call to retrieve_results. You update the searchQuery every keyup, but only do the retrieve_results after the time you want. I hope it helps you.

    searchQuery="";
    timeIsUp=true;

    $("#my_search_box").keyup(function(){

      searchQuery=$(this).val();

      if(timeIsUp){
        timeIsUp=false;
        setTimeOut("retrieve_results(searchQuery); timeIsUp=true",500); 
      }

    });