php/jquery 搜索框

Question

我正在尝试使用 php 和 jquery 实现一个搜索框(搜索结果来自数据库)。我想要做的是，当用户在搜索框中键入内容时，将进行查询以查找包含用户在搜索框中输入的关键字的数据。我遇到的问题是我有这样的事情:

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

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

});

这样做的问题是，每次用户完成输入时都会调用函数retrieve_results()(当然，因为这就是按键的用途)。因此，这可能会变得非常慢，因为如果用户输入一个大约 10 个字符的单词，retrieve_results() 函数将被连续调用 10 次。另外，我应该提到，在retrieve_results() 函数中，我正在使用 jQuery $.ajax 执行 Ajax 请求来获取结果。所以我的问题如下:

如何才能使我的函数retrieve_results()在每次用户停止输入时(每次按键时)都不会被执行。我想保留该功能，但我不希望用户单击“搜索”按钮或其他内容。我只是希望我的retrieve_results() 函数仅在用户输入完所有关键字时被调用一次(而不是每次用户输入字母或其他内容时)

谢谢

Answer 1

理想情况下，您只希望针对用户输入的最后一个字符触发搜索。最好的方法是给他足够的时间来连续打字，如果他停下来(甚至思考)，就运行搜索。单独使用 setTimeout 是行不通的，因为即使这样也会触发多次。您必须使用 clearTimeout 清除超时。

您可以使用以下方法来达到所需的效果:

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

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

请参阅以下 JSFiddle 演示:http://jsfiddle.net/highwayoflife/WE4Fr/