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保存在变量中,如果我们得到另一个按键并且响应尚未返回,那么我们中止前一个,确保只有最新的一个实际返回响应.

希望有所帮助.

祝好运 :)