Question

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

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

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

我可以在文字更改事件上执行此操作，但我的方案需要一些重要警告 - 我需要在最后一次按键后稍微暂停后执行实际搜索。

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

这样做有直接的方法吗？

目前我正在使用JQuery和Bootstrap。我更喜欢任何答案只有这些库或其他一些非常轻量级的JS工具。此外，这不是一个自动完成的问题。我不需要TextBox包含附加后的文字，也不希望下拉列表显示在我的TextBox推荐内容下。我想在用户搜索时动态更新正在显示的数据。

Answer 1

您可以使用简单的Javascript超时，该超时会在输入字段的每个键盘上清除。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何实现自动搜索TextBox，延迟时间短？

2 个答案: