从键盘上的字段中获取文本，但延迟进一步输入

2022-01-11 00:00:00 jquery jquery-plugins javascript jquery-events

我有一个在各种元素发生变化时远程提交的表单.特别是在搜索字段上，我使用 keyup 来检测字段中的文本何时更改.这样做的问题是，当有人输入chicken"时，表单会提交七次，只计算最后一次.

I have a form which is submitted remotely when the various elements change. On a search field in particular I'm using a keyup to detect when the text in the field changes. The problem with this is that when someone types "chicken" then the form is submitted seven times, with only the last one counting.

最好是这样的

  • 检测到按键 - 开始等待(一秒钟)

  • keyup detected - start waiting (for one second)

检测到另一个按键 - 重启等待时间

another keyup detected - restart waiting time

等待完成 - 获取值并提交表单

waiting finishes - get value and submit form

在我开始编写我自己的版本之前(我真的是一个只有一点 js 的后端人员，我对所有事情都使用 jQuery)，是否已经有一个现有的解决方案?这似乎是一个普遍的要求.也许是一个 jQuery 插件?如果不是，那么最简单和最好的编码方式是什么?

before I go off and code my own version of this (I'm really a backend guy with only a little js, I use jQuery for everything), is there already an existing solution to this? It seems like it would be a common requirement. A jQuery plugin maybe? If not, what's the simplest and best way to code this?

更新 - 为 Dan 添加的当前代码(如下)

UPDATE - current code added for Dan (below)

Dan - 这可能是相关的.我在页面上使用的其中一个 jQuery 插件(tablesorter)需要这个文件 - tablesorter/jquery-latest.js"，如果包含该文件，则会导致您的代码出现与以前相同的错误:

Dan - this may be relevant. One of the jQuery plugins I'm using on the page (tablesorter) requires this file - "tablesorter/jquery-latest.js", which, if included, leads to the same error with your code as before:

jQuery("input#search").data("timeout", null) 未定义http‍://192.168.0.234/javascripts/main.js?126408446711号线

jQuery("input#search").data("timeout", null) is undefined http‍://192.168.0.234/javascripts/main.js?1264084467 Line 11

也许不同的 jQuery 定义之间存在某种冲突?(或什么)

Maybe there's some sort of conflict between different jQuery definitions? (or something)

$(document).ready(function() {
  //initiate the shadowbox player
//  Shadowbox.init({
//    players:  ['html', 'iframe']
//  });
}); 

jQuery(function(){
  jQuery('input#search')
    .data('timeout', null)
    .keyup(function(){
      jQuery(this).data('timeout', setTimeout(function(){
          var mytext = jQuery('input#search').val();
          submitQuizForm();
          jQuery('input#search').next().html(mytext);
        }, 2000)
     )
     .keydown(function(){
       clearTimeout(jQuery(this).data('timeout'));
     });
    });
});

function submitQuizForm(){
  form = jQuery("#searchQuizzes");
  jQuery.ajax({
    async:true, 
    data:jQuery.param(form.serializeArray()), 
    dataType:'script', 
    type:'get', 
    url:'/millionaire/millionaire_quizzes',
    success: function(msg){ 
     // $("#chooseQuizMainTable").trigger("update"); 
    }
  }); 
  return true;
}

推荐答案

对不起，我还没有测试过这个，它有点离我的头，但是这些方面的东西应该可以解决问题.将 2000 更改为服务器帖子之间所需的毫秒数

Sorry i haven't tested this and it's a bit off the top of my head, but something along these lines should hopefully do the trick. Change the 2000 to however many milliseconds you need between server posts

<input type="text" id="mytextbox" style="border: 1px solid" />
<span></span>

<script language="javascript" type="text/javascript">
    jQuery(function(){
      jQuery('#mytextbox')
        .data('timeout', null)
        .keyup(function(){
            clearTimeout(jQuery(this).data('timeout'));
            jQuery(this).data('timeout', setTimeout(submitQuizForm, 2000));
        });
    });
</script>

相关文章