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）。 / p>

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

Answer 2

你可以开始一个时间...让我们说...在第一个键之后...如果间隔大于2秒（在键之间）做一个搜索别的等待 http://api.jquery.com/delay/

示例（来自To delay JavaScript function call using jQuery）：

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

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

没有时间用延迟

进行测试

替代（测试）它在3分钟内完成（我当地时间凌晨2点12分）

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

Answer 3

我建议使用jQuery中的delay方法或JavaScript中的setTimeout（）函数，每次keyup方法执行时，间隔将重置为原始间隔。 Here is a brief explanation的setTimeout（）方法和JavaScript中的其他几个计时器方法。

Answer 4

像这样的东西应该这样做。您可以创建一个全局变量来存储查询，另一个用于知道是否有足够的时间来调用retrieve_results。您可以在每个键盘更新searchQuery，但只能在您想要的时间之后执行retrieve_results。我希望它可以帮助你。

    searchQuery="";
    timeIsUp=true;

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

      searchQuery=$(this).val();

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

    });

php / jquery搜索框

4 个答案: