JQueryUIオートコンプリートはどのように非同期結果を処理しますか？

Question

JQueryUIのオートコンプリート機能が反復キー押下を処理して非同期結果がどのように発生するかを理解できません。私はそれに似た機能を持つものが必要でしたが、オートコンプリートされた結果を適切に受け取ることができません。例：

$(document).ready(function() { 
    $('#textinput').live('keyup', function() { 
     $.get('bacon.php', function(data) { 
      $('#holder').html(data); 
     }); 
    }); 
}); 

すぐにタイプすると、結果が正しい順序で戻ってこないことが問題です。 「KEY」という単語を入力すると、「K」、次に「KEY」、そして「KE」の結果が返され、#holderの内容が乱れることがあります。私はJQueryUIオートコンプリートにこの問題がないことに気づきましたが、それがどのように処理されるのか理解できません。

Answer 1

ようになるあなたのケースでは、私は、この特定の問題に関して、jQueryのオートコンプリート機能を見ていないが、私は私のカスタム自動補完スクリプトで行うことは、私がXHRリクエストを中止しています特定の時間枠内で別のキーが押された場合。このような何かを：

var xhr, throttle; 

$('.autocomplete').keyup(function() { 
     var $this = $(this); 
     if (throttle) 
     clearTimeout(throttle); // Clear the previous request 
     xhr.abort(); // Abort the last XHR request 
     throttle = setTimeout(function() { 
      xhr = $.getJSON('autocomplete.php', { data: $this.val() }, function(data) { 
       // do something with response 
      }); 
     }, 250); // wait 250 milliseconds before running this 
}); 

基本的には、スロットルは、我々は（あなたは何にこれを設定することができます）は、ユーザーがまだ入力された場合には、要求を送信する前に250ミリ秒を待って確認します。 "xhr"変数はXMLHttpRequestを変数に保持し、別のkeypressを取得し、応答がまだ戻っていない場合は、前のものを中止して、最新のものだけが実際に応答を返すようにします。

希望に役立ちます。

幸運:)

Answer 2

私は非常に関連性の高いものに取り組んでいました。関数を遅延デリゲートに変換する単純な「遅延」API。

Function.prototype.delayed = function(ms, reset) 
{ 
    var timeout; 
    var fn = this; 
    return function() 
    { 
     var args = arguments; 
     var scope = this; 
     if (reset && timeout) clearTimeout(timeout); 
     timeout = setTimeout(function() { fn.apply(scope, args) }, ms); 
    }; 
}; 

サンプル使用の場合はfiddleを参照してください。

それがこの

$(document).ready(function() { 
    $('#textinput').live('keyup', (function() { 
     $.get('bacon.php', function(data) { 
      $('#holder').html(data); 
     }); 
    }).delayed(300, true)); 
}); 

Answer 3

は正確に同じ問題を抱えていた、とアディOsmani言及proxy patternをつまずきました。少なくとも[v1.8.17]（https://github.com/jquery/jquery-ui/について