Question

我正在我的webapp中实现实时搜索（=键入时搜索）功能。目前我正在使用keyup事件通过ajax post发送搜索请求，例如

$('#SearchField').keyup(function(e) {
        $.post(
           ...
        );
});

但是这会导致某种滞后问题，在某些情况下，当我搜索时，例如在“问题”之后，“pro”的响应在“问题”的响应之后显示出来并覆盖正确的搜索结果一种取得重大成果的方法。

打击这种行为的好方法是什么？

tia

Answer 1

您可以中止之前的请求

var xhr = null;
$('#SearchField').keyup(function(e) {
  if (xhr !== null) xhr.abort ();
  xhr = $.post(
    ...
  );
});

或为每个请求设置assign id。当请求完成时，如果已经返回更大的id，则忽略该答案。否则，存储id。

Answer 2

我实施了一次“实时搜索”并使用超时仅在没有输入一段时间（半秒左右）之后才开始搜索。这样，只有在用户停止输入时，才会触发搜索，从而减少延迟结果和服务器负载。

在您的情况下，我会检查，如果用户继续输入并且不会提交搜索或显示任何迟到的“旧”结果。

Answer 3

$('#SearchField').keyup(function(e) {
  t = setTimeout(function(){        
    $.post(
           ...
    );
  },1000);
});

使用此代码，您的功能将在1000ms后执行。如果再次触发keyup，它将覆盖变量，并有效地取消第一个函数。换句话说，整个帖子都不会发生，直到用户停止输入1秒钟。

Answer 4

大多数自动完成不会替换用户输入的内容 - 他们会在用户可以选择的下拉列表中显示可能的选项。

这是一个很好的自动完成的例子：http://view.jquery.com/trunk/plugins/autocomplete/demo/

Answer 5

正如您所发现的那样，在创建出色的实时搜索体验时会涉及到许多棘手的UI（用户界面）或UX（用户体验）问题。

我将重要的UI / UX测试留给了雅虎的人们，雅虎已经开发了他们在网络资产上使用的自动完成控件。更好的消息是他们已经将其作为开源发布：http://developer.yahoo.com/yui/autocomplete/

不那么好的消息是它不使用JQuery而你这样做。您可以查看他们的来源并了解他们如何处理多个时间问题等。请注意，他们在按键时启动计时器，而不是按键。

还有一篇关于Flickr如何使用Yaho自动完成功能实现页内搜索的好文章：http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

Answer 6

诀窍是使用aborts和ajax队列，我为我创建的实时搜索编写了一个自定义库，过滤了像黄油这样的2000万条记录（授予优化的eav表帮助查询速度）。还有一个jquery ajax管理器插件可以很好地工作（我需要一些更复杂的东西，所以我自己编写）。你可以设置队列号，中止新的呼叫等。这样在最终用户输入之前不会有任何请求

你如何解决实时搜索的“滞后”问题？

6 个答案: