Question

我已经为查询的自动提示实现了一个脚本。问题是，每当我按下一个键时，他就会调用脚本。我试图添加超时但它仍然会造成麻烦。代码如下：

<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);
 }
}

任何想法？谢谢！

Answer 1

由于您已经在使用jQuery，请添加自动完成插件，或者使用该插件的jQuery UI替换。

这是插件的链接，以及有关jQuery UI转换的说明。它还有关于插件的注释：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Answer 2

虽然其他人通过向您发送使用自动完成插件来回答这个问题，但这并没有真正回答以下问题：“如何让每个按键都不会触发脚本？”

为什么这很重要？零延迟对本地数据有意义（响应更快），但可以为远程数据产生大量负载，同时响应速度较慢。如果在每次击键后每次搜索都会触发，那么用户只需要搜索“chrysanthemum”这个词就会触发13次搜索，当脚本应该等到用户无法弄清楚如何键入其余的单词时然后开始搜索。

虽然大多数自动完成/自动建议脚本都有一个超时变量以下是如何使用jQuery实现自己的等待用户的计时器：

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

请注意HTML不会被任何Javascript污染。这是因为jQuery的Awesomeness不依赖于HTML中嵌入的JS来执行所需的功能。

$(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);
    }
});

以下是发生的事情：我们将setTimeout计时器分配给变量，该变量必须在keyup函数上方声明，并在每次keyup触发时检查该变量。如果正在进行中存在setTimeout，请将其清除，以便它不会触发search()函数并创建一个新的计时器设置为等待指定的毫秒数（在我的示例中为1000）。 / p>

jquery自动提示和超时

2 个答案: