（jquery / js） - 在keyup上从字段获取文本，但是有进一步输入的延迟

问题描述

嘿所有人。我有一个表单，当各种元素发生变化时，它会被远程提交。特别是在搜索字段上，我使用密钥来检测字段中的文本何时发生变化。这个问题是当有人输入鸡时，表单会被提交七次，只有最后一次计数。

这样的事情会更好

• 检测到密钥 - 开始等待（一秒钟）




• 检测到另一个密钥 - 重启等待时间




• 等待完成 - 获取价值并提交表格

在我关闭并编码我自己的版本之前（我真的是一个只有一点js的后端人，我用jquery来处理所有事情），是否已经存在解决这个问题？这似乎是一个普遍的要求。一个jquery插件可能吗？如果没有，最简单和最好的方法是什么？

谢谢，最大

更新 - 当前代码添加丹（下图）

丹 - 这可能是相关的。我正在页面上使用的一个jquery插件（tablesorter）需要这个文件 - tablesorter / jquery-latest.js，如果包含它，会导致与你的代码一样的错误：

jQuery（输入#search）。data（timeout，null）未定义

第11行

也许在不同的jquery定义之间存在某种冲突？ （或其他）

  $（文件）.ready（function（）{
 //启动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'））; 
}）; 
}）; 
}）; 
 
函数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）; 
} 
}）; 
返回true; 
} 
  

解决方案

抱歉，我还没有测试过这有点偏离我的头脑，但沿着这些方向的东西应该有希望做到这一点。将服务器帖子之间的2000更改为多少毫秒

 < input type =textid =mytextboxstyle =border：1px solid/> 
< span>< / span> 
 
< script language =javascripttype =text / javascript> 
 jQuery（function（）{
 jQuery（'＃mytextbox'）
 .data（'timeout'，null）
 .keyup（function（）{
 clearTimeout （jQuery（this）.data（'timeout'））; 
 jQuery（this）.data（'timeout'，setTimeout（submitQuizForm，2000））; 
}）; 
}） ; 
< / script> 
  

Hey all. 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.

What would be better is something like this

• keyup detected - start waiting (for one second)

• another keyup detected - restart waiting time

• waiting finishes - get value and submit form

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?

thanks, max

UPDATE - current code added for Dan (below)

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) is undefinedhttp://192.168.0.234/javascripts/main.js?1264084467Line 11

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;
}

解决方案

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>

这篇关于（jquery / js） - 在keyup上从字段获取文本，但是有进一步输入的延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！