jquery - 如何在短时间内实现自动搜索文本框？

Question

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

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

但是，我更喜欢的是，当我的用户键入时，应用程序将调用 GridView 控件 UpdatePanel 上的更新，这将在用户键入时更新网格.

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

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

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

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

Answer 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>