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

问题描述

我有一个表单，可以在各种元素更改时远程提交.特别是在搜索字段中，我正在使用键盘输入来检测字段中的文本何时更改.这样做的问题是，当有人键入鸡"时，该表单将被提交七次，只有最后一次计数.

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/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定义之间可能存在某种冲突? (或其他东西)

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>

这篇关于从键盘上的字段中获取文本，但需要进一步输入才有延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！