代码之家 › 专栏 › 技术社区 › Jaime Febres

确定用户何时键入

ajax javascript

Jaime Febres · 技术社区 · 17 年前

我正在构建一个搜索框(输入字段),该搜索框应该进行服务器调用,以筛选插入文本的网格,但我需要以智能方式进行此操作,仅当用户停止时才需要启动服务器调用。现在我正在尝试实现它,但是如果有人知道如何实现它,我会非常高兴的。不管怎样,如果我先做,我会把答案贴在这里… 最好的问候, 雅伊姆。

6 回复 | 直到 9 年前

Morgoth Jerry Coffin 9 年前

按键时:
1. 检查是否有现有计时器-如果有,停止计时器
2. 启动计时器。
当计时器过期时,调用服务器方法。

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

Andrew Rollings 17 年前

你可以打电话给 setTimeout 在按键事件上调用服务器功能(可能延迟2-3秒)。一按Akey,就取消上一个 设置超时 呼叫并创建一个新的。

然后,经过2-3秒没有按键,服务器事件将被激发。

Paul 16 年前

下面是一种不使用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>

Astra 17 年前

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

Treb 17 年前

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

这种方法的问题在于,每次暂停时都会触发提交,例如,如果用户停止键入以描述咖啡休息时间。你必须看看这是否能被用户接受。

Jaime Febres 17 年前

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