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

Question

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

什么会更好是这样的

• 检测到密钥 - 开始等待(一秒钟)

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

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

在我离开并编写我自己的版本之前(我真的是一个只有一点js的后端人,我用jquery来处理所有事情),是否已有现有解决方案？这似乎是一个普遍的要求.一个jquery插件可能吗？如果没有,最简单和最好的方法是什么？

谢谢,最大

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

丹 - 这可能是相关的.我正在页面上使用的一个jquery插件(tablesorter)需要这个文件 - "tablesorter/jquery-latest.js",如果包含它,会导致与您之前的代码相同的错误:

jQuery("input #search").data("timeout",null)未定义 http://192.168.0.234/javascripts/main.js?1264084467 第11行

也许在不同的jquery定义之间存在某种冲突？(或者其他的东西)

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

Answer 1

对不起,我没有对此进行测试,这有点偏离我的脑海,但是这些方面的内容应该有所帮助.将服务器帖子之间的2000更改为所需的毫秒数

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

Answer 2

这是你喜欢的jquery扩展:

(function($){

$.widget("ui.onDelayedKeyup", {

    _init : function() {
        var self = this;
        $(this.element).keyup(function() {
            if(typeof(window['inputTimeout']) != "undefined"){
                window.clearTimeout(inputTimeout);
            }  
            var handler = self.options.handler;
            window['inputTimeout'] = window.setTimeout(function() {
                handler.call(self.element) }, self.options.delay);
        });
    },
    options: {
        handler: $.noop(),
        delay: 500
    }

});
})(jQuery);

像这样使用它:

    $("input.filterField").onDelayedKeyup({
        handler: function() {
            if ($.trim($(this).val()).length > 0) {
                //reload my data store using the filter string.
            }
        }
    });

默认情况下会延迟半秒.