Question

我正在构建一个搜索框（输入字段），该搜索框应该进行服务器调用以过滤其上插入文本的网格，但我需要以智能方式进行此操作，我只需要触发服务器调用用户已停止。现在我正在努力实现它，但如果有人知道该怎么做，我会非常高兴。无论如何，如果我先做，我会在这里发布答案...... 最好的祝福，海梅。

Answer 1

按下某个键时：
1. 检查是否有现有的计时器 - 如果有一个
2. 启动计时器。
当计时器到期时，请调用服务器方法。

var searchTimeout;
document.getElementById('searchBox').onkeypress = function () {
    if (searchTimeout != undefined) clearTimeout(searchTimeout);
    searchTimeout = setTimeout(callServerScript, 250);
};
function callServerScript() {
    // your code here
}

Answer 2

你可以使用调用你的服务器功能的setTimeout调用（可能有2-3秒的延迟）来进行按键事件。按下akey后，取消之前的setTimeout电话并创建一个新电话。

然后，在没有按键的情况下经过了2-3秒，将触发服务器事件。

Answer 3

这是一种没有jQuery的简单方法：

<input type="text" id="TxtSearch" onchange="countDown=10;" />

<script type="text/javascript">

var countDown = 0;
function SearchTimerTick()
{
   if(countDown == 1)
   {
      StopTypingCommand();
      countDown = 0;
   }

   if(countDown > 0)
      countDown--;
}

window.setInterval(SearchTimerTick,1000);

</script>

Answer 4

你也可能想检查输入框上字符串的长度，否则有可能返回一个巨大的结果集！

Answer 5

我对JavaScript知之甚少，但你可以使用一个计时器（假设设置为5秒），它会在输入框的每个更改事件中重置。如果用户停止输入超过5秒，则计时器到期并触发提交。

该方法的问题在于每次暂停时触发提交，例如如果用户停止打字以打破咖啡休息时间。你必须看看这是否为用户所接受。

Answer 6

感谢您的反馈。我实现了这段代码，似乎它完成了工作（使用jquery）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    var interval = 500;
    var filterValue = "";
    $(document).ready(function() {
        $(".txtSearch").bind("keypress", logKeyPress);
    });
    function logKeyPress() {
        var now = new Date().getTime();
        var lastTime = this._keyPressedAt || now;
        this._keyPressedAt = now;
        if (!this._monitoringSearch) {
            this._monitoringSearch = true;
            var input = this;
            window.setTimeout(
                function() {
                    search(input);
                }, 0);
        }
    }
    function search(input) {
        var now = new Date().getTime();
        var lastTime = input._keyPressedAt;
        if ((now - lastTime) > interval) {
            /*console.log(now);
            console.log(lastTime);
            console.log(now - lastTime);*/
            if (input.value != filterValue) {
                filterValue = input.value;
                //console.log("search!");
                alert("search!");
            }
            input._monitoringSearch = false;
        }
        else {
            window.setTimeout(
                function() {
                    search(input);
                }, 0);
        }
    }
</script>

确定用户何时键入

6 个答案: