如何实现自动搜索文本框，延迟很短？

Posted 2023-05-08

【中文标题】如何实现自动搜索文本框，延迟很短？

【英文标题】：How can I implement an autosearch TextBox, with short delay?

【发布时间】：2016-02-06 21:52:15

【问题描述】：

我有一个GridView，我的用户需要根据输入到多个过滤器文本字段中的条件进行过滤。

解决此问题的最简单方法是创建所需的TextBox 控件，用户完成后，可以单击“搜索”按钮执行搜索。

但是，我希望用户在键入时，应用程序将调用GridView 控件UpdatePanel 上的更新，这将在他们键入时更新网格。

我可以在文本更改事件上执行此操作，但我的场景需要一个主要警告——我需要在最后一次按键后稍微暂停后执行实际搜索。

我的推理应该是显而易见的。如果用户输入 20-30 字符的搜索字符串（这很有可能），我不希望页面发出 20-30 更新请求。相反，一旦用户暂停了 500 毫秒，我想执行更新。

有没有直接的方法来做到这一点？

目前我正在使用 JQuery 和 Bootstrap。我宁愿只回答这些库或其他一些非常轻量级的 JS 工具。此外，这不是一个自动完成的问题。我不需要TextBox 包含后附加的文本，我也不希望在我的TextBox 建议内容下出现下拉菜单。我想在用户搜索时动态更新正在显示的数据。

【参考方案1】：

您可以使用简单的 javascript 超时来清除输入字段的每个键。

$(function() 

  var timeout;

  $("#search").keyup(function() 
    clearTimeout(timeout);
    
    timeout = setTimeout(function() 
      $("#result").text('You searched for ' + $("#search").val());
    , 500);

  );


);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="search" />
<span id="result"></span>

【参考方案2】：

您可以使用debounce library。您只需使用 $.debounce 和所需的延迟作为参数包装您的处理程序。

$("#text").on("keyup", $.debounce(250, function() 
   $("#log").append($("<li/>").text(this.value));
));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/cowboy/jquery-throttle-debounce/master/jquery.ba-throttle-debounce.js"></script>
Text: <input id="text"/>
<ul id="log"></ul>