JQueryUI自动完成如何处理异步结果？

我很难理解JQueryUI的自动完成函数如何处理导致异步结果的重复按键。我需要一些具有类似功能的东西，但我无法使自动完成的结果正确显示。示例：JQueryUI自动完成如何处理异步结果？

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

问题是，如果快速输入，结果通常不会以正确的顺序返回。如果我输入'KEY'这个词，我可能会得到'K'，然后'KEY'和'KE'的结果，搞乱了#holder的内容。我注意到JQueryUI自动完成没有这个问题，但我无法理解它如何处理它。

来源

2012-01-05 grobolom

对于至少[v1.8.17（https://github.com/jquery/jquery-ui/更多相关提交/ f74537d62dc356d7804457b44d64be2139b9d84f），你可以看到jQuery UI如何处理它[定义'source']（https://github.com/jquery/jquery-ui/blob/349dce37626e0eb05fa8df56bee426582ca72bc6/ui/jquery.ui.autocomplete.js ＃L261），特别是第264-267行。 – 2012-01-05 19:51:31

我没有关于看着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保存在一个变量中，如果我们得到另一个按键并且响应还没有返回，那么我们中止前一个，确保只有最新的响应返回。

希望有所帮助。

祝你好运:)

来源

2012-01-05 19:36:47 Jemaclus

我强烈怀疑'$（this）.val（）'会试图获得'window'对象的值:) – 2012-01-05 19:51:02

糟糕，很好。在编辑框中输入。修复.. :) – Jemaclus 2012-01-05 19:57:42

谢谢你，先生。这正是我所期待的。 – grobolom 2012-01-05 20:10:14

我只是在处理非常相关的事情。一个简单的“延迟”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)); 
});

来源

2012-01-05 19:36:02

为具有完全相同的问题，并通过跌跌撞撞奥斯马尼阿迪提到的proxy pattern。

我认为这是一个实时观测事件

$("button").on("click", function() { 
    setTimeout($.proxy(function() { 
     // "this" now refers to our element as we wanted 
     $(this).addClass("active"); 
    }, this), 500); 
});

希望帮助

来源

2014-04-18 09:03:29

JQueryUI自动完成如何处理异步结果？

回答

相关问题