确定用户何时键入

时间:2008-12-11 16:11:10

标签: javascript ajax

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

6 个答案:

答案 0 :(得分:24)

  1. 按下某个键时:
    1. 检查是否有现有的计时器 - 如果有一个
    2. 则将其停止
    3. 启动计时器。
  2. 当计时器到期时,请调用服务器方法。
  3. var searchTimeout;
    document.getElementById('searchBox').onkeypress = function () {
        if (searchTimeout != undefined) clearTimeout(searchTimeout);
        searchTimeout = setTimeout(callServerScript, 250);
    };
    function callServerScript() {
        // your code here
    }
    

答案 1 :(得分:5)

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

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

答案 2 :(得分:2)

这是一种没有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>

答案 3 :(得分:1)

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

答案 4 :(得分:0)

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

    

答案 5 :(得分:0)

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

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

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1