确定用户何时输入

I am building a search box (input field) which should make a server call to filter a grid with the text being inserted on it but I need to make this in an smart way, I need to fire the server call only if the user has stopped. Right now I'm trying to implement it, but if someone knows how to do it I'll be very pleased. Anyway, if I do it first I'll post the answer here... Best Regards, Jaime.

我正在构建一个搜索框(输入字段)，它应该进行一个服务器调用来过滤一个网格，其中插入了文本，但我需要以一种巧妙的方式进行过滤，只有当用户停止时，我才需要触发服务器调用。现在我正在尝试实现它，但是如果有人知道怎么做，我会很高兴的。不管怎样，如果我先这么做，我会把答案贴在这里……最好的问候,杰米。

6 个解决方案

#1

When a key is pressed:
1. Check if there's an existing timer - stop it if there is one
2. 检查是否有计时器——如果有计时器就停止
3. start a timer.
4. 启动一个计时器。
当按下一个键时:检查是否有一个已有的计时器——如果有一个启动计时器，则停止它。
When the timer expires, call the server method.
当计时器过期时，调用服务器方法。

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

#2

You could use calls to setTimeout that calls your server function (with a maybe 2-3 second delay) on a keypress event. As soon as akey is pressed, cancel the previous setTimeoutcall and create a new one.

您可以使用对setTimeout的调用来调用您的服务器函数(可能延迟2-3秒)。一旦按下akey，取消之前的setTimeoutcall并创建一个新的。

Then, 2-3 seconds have elapsed with no keypresses, the server event will be fired.

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

#3

Here is a simple way that will work without jQuery:

这里有一个简单的不用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>

#4

You also probably want to check the length of the string on the input box, otherwise risk returning a huge result set!

您还可能想要检查输入框上的字符串长度，否则可能会返回一个巨大的结果集!

#5

I don't know much about JavaScript, but you could use a timer (lets say set to 5 seconds) that gets reset on every change event from your input box. If the user stops typing for more than 5 seconds, the timer expires and triggers the submit.

我不太了解JavaScript，但是您可以使用一个计时器(假设设置为5秒)，在输入框中的每个更改事件上重置它。如果用户停止输入超过5秒，计时器将过期并触发提交。

The problem with that approach is that the submit is triggered on every pause, e.g. if the user stops typing to tale a coffee break. You will have to see if this is acceptable to the users.

这种方法的问题在于每次暂停时都会触发提交，例如，如果用户停止输入以结束咖啡休息时间。您将不得不查看用户是否接受这一点。

#6

thanks for your feedback. I'd implemented this piece of code and it seems that it does the job (using jquery):

谢谢你的反馈。我实现了这段代码，它似乎完成了工作(使用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>

#1

When a key is pressed:
1. Check if there's an existing timer - stop it if there is one
2. 检查是否有计时器——如果有计时器就停止
3. start a timer.
4. 启动一个计时器。
当按下一个键时:检查是否有一个已有的计时器——如果有一个启动计时器，则停止它。
When the timer expires, call the server method.
当计时器过期时，调用服务器方法。

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

#2