jquery autosuggestion and timeout

I have implemented a script I found for the autosuggestion for queries. The problem is, he is calling the script each time I push a key. I tried to add a timeout but it still making troubles. Here the code:

<input type="text" onkeyup="lookup(this.value);">

function lookup(inputString) {
 var time = new Date().getTime();
 var dummy_trigger = true;
 if(inputString.length == 0) {
  $('#suggestions').fadeOut(); // Hide the suggestions box
 } else {
 function timepassed(){
  now = new Date().getTime() - time;

  if开发者_运维技巧(now > 3000 && dummy_trigger){
    alert("search");
    dummy_trigger = false;
  }
 }
 setInterval(timepassed, 1000);
 }
}

any ideas? Thanks!

Since you are already using jQuery, either add the autocomplete plugin, OR use the jQuery UI replacement for that plugin.

Here is a link to the plugin, as well as notes on the jQuery UI transition. It also has notes about a plugin going forward: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Although others answered the question by sending you to use an autocomplete plugin, this doesn't really answer the question of: "How do you make the script not fire for every keypress?"

Why is this important? A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive. If each search fires after every keystroke, the user is firing off 13 searches simply to search for the word 'chrysanthemum', when the script should just wait until the user can't figure out how the heck to type the rest of the word and THEN fire off the search.

Although most autocomplete/auto-suggestion scripts have a variable for timeout Here's how to implement your own timer which waits for the user using jQuery:

<input type="text" id="query" />

Note how the HTML is not polluted by any Javascript. This is because the Awesomeness of jQuery does not rely on JS embedded in the HTML to perform needed functionality.

$(document).ready(function() {
    var timer,
        $suggestions = $('#suggestions'),
        $search_box = $('#query');

    $search_box.keyup(function() {
        if (timer) {
            // There is a running timer from a previous keyup
            // Clear this timer so we don't have overlap
            clearTimeout(timer);
        }

        if (this.length == 0) {
            $suggestions.fadeOut();
        } else {        
            timer = setTimeout(function() {
                search();
            }, 1000);
        }
    });

    function search() {
        var query = $search_box.val();
        alert('searching for ' + query);
    }
});

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).