php/jquery搜索框

我试图用php和jquery实现搜索框（搜索结果来自数据库）。我想要做的是当用户在搜索框中键入时，将进行查询以查找包含用户在搜索框中输入的关键字的数据。我遇到的问题是，我有这样的事情：php/jquery搜索框

有这样做的问题是，该功能retrieve_results（）被调用每个用户完成时间过程的输入（，导致这就是关键是在那里）。因此，这可能会变得非常缓慢，因为如果用户输入一个有10个字符的单词，则连续调用retrieve_results（）函数10次。另外，我应该提到在我的retrieve_results（）函数中，我正在使用jQuery $ .ajax来获取结果。所以我的问题是以下几点：

我该怎么做才能让我的函数retrieve_results（）不会在用户每次停止键入时执行（每次键都启动时）。我想保留这个功能，但我不希望用户点击“搜索”按钮或其他东西。我只是想我的retrieve_results（）函数被调用，只有当用户完成输入所有关键词一次（不是每次用户输入一个字母或东西）

谢谢

来源

2012-02-22 user765368

理想情况下，您只希望搜索引发用户输入的最后一个字符。做到这一点的最好方法是给他足够的时间继续打字，如果他暂停（甚至想），可以运行搜索。使用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/

来源

2012-02-23 02:53:45

非常感谢，你是男人，但问题，为什么我必须每次清除计时器？ – user765368 2012-02-23 03:18:49

@ user765368如果现有“超时”功能正在运行，我们只清除超时。如果我们没有清除这个超时，那么您的搜索会针对每次按键触发，只会延迟1000毫秒。你可以试试它......在jsfiddle中，删除'if（timeout）...'代码并运行脚本。您会注意到每次按键将在1秒后触发搜索功能。 – 2012-02-23 04:58:18

你可以开始蒂默。 ..let`s说...第一个键后......如果间隔超过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'); 
}

来源

2012-02-22 23:46:34

+1如果你能提供一个工作的例子。 :) – 2012-02-22 23:52:17

接受的挑战 – 2012-02-23 00:25:10

如果我的函数需要参数，如何在setTimeout函数内传递这些参数？ – user765368 2012-02-23 02:31:31

我会建议使用jQuery中的延迟方法或JavaScript中的setTimeout（）函数，其中每次执行keyup方法时，间隔将重置为原始间隔。 setTimeout（）方法的Here is a brief explanation以及在JavaScript中找到的其他几个定时器方法。

来源

2012-02-22 23:52:56

这样的事情应该这样做。您创建一个全局变量来存储查询，另一个知道是否有足够的时间通过新的调用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); 
     } 

    });

来源

2012-02-23 00:00:45

我希望这不是不礼貌，我不能评论第一个答案，我认为你可以做得更好。你不需要清除超时，就像在第一个答案中一样，如果另一个正在运行并且将searchQuery存储在变量上，那么只需要不创建新的setTimeOut，以便最后一次更改始终是一个被寻找。它比创建和销毁大量定时器更有效率。 – 2012-02-23 08:22:38

如果您没有使用清除超时并且没有触发，即使用户还没有完成打字，搜索仍然会触发。所以我们假设用5秒钟的时间输入一个查询，而不是等到他完成之后，搜索将会以1000ms的等待时间发射10次（500ms）或5次。使用clearTimeout，当用户完成1000ms的输入时，搜索将等待触发。这在服务器上更轻。 – 2012-02-23 17:26:27

确实，对不起。这在服务器上会更轻，确实如此。 – 2012-02-23 20:50:14

php/jquery搜索框

回答

相关问题