問題描述

我有一個在各種元素發(fā)生變化時遠程提交的表單.特別是在搜索字段上，我使用 keyup 來檢測字段中的文本何時更改.這樣做的問題是，當(dāng)有人輸入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)，是否已經(jīng)有一個現(xiàn)有的解決方案?這似乎是一個普遍的要求.也許是一個 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 添加的當(dāng)前代碼(如下)

UPDATE - current code added for Dan (below)

Dan - 這可能是相關(guān)的.我在頁面上使用的其中一個 jQuery 插件(tablesorter)需要這個文件 - tablesorter/jquery-latest.js"，如果包含該文件，則會導(dǎo)致您的代碼出現(xiàn)與以前相同的錯誤:

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

推薦答案

對不起，我還沒有測試過這個，它有點離我的頭，但是這些方面的東西應(yīng)該可以解決問題.將 2000 更改為服務(wù)器帖子之間所需的毫秒數(shù)

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>

這篇關(guān)于從鍵盤上的字段中獲取文本，但延遲進一步輸入的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！