如何使用Dojo实现实时搜索/搜索建议？

Question

我想在使用Dojo框架的Web应用程序中实施“实时搜索”或“搜索建议”功能。这与您键入时Google和Bing搜索显示匹配的方式类似：当您在搜索框中键入时，下面会显示可能匹配的列表。搜索将在服务器端执行，并使用AJAX将结果发送回浏览器。

有谁知道使用Dojo实现这个功能的好方法吗？

这里有一些可能的备选方案：

• 内置插件dijit.form.ComboBox
  这具有非常类似的功能，但我只看到它与有限的数据使用。这些示例总是使用小列表（例如美国的50个州），并预装全部数据集以进行客户端过滤。不过，我认为我可以将它连接到一个dojox.data.JsonQueryRestStore进行服务器端搜索 - 任何人都可以确认它是否有效？

• QueryBox http://marumushi.com/code/querybox/
  这个实现主要做的工作，但它有一些小错误，不看像它的维持。在使用它之前，我必须对代码进行一些错误修正。

• Medryx http://blog.medryx.org/2008/09/10/dijitsearch-part-2/
  这也像它的工作，但它被描述为“alpha级”代码和链接代码似乎被打破......

我可能会做出上述工作之一，但我想知道是否有更好的选择。

Answer 1

我5年前来实现它，当道场为0.2：

• http://www.lazutkin.com/blog/2005/12/23/live-filtering/

虽然代码是古老的，它是平凡的，并希望这会给你的想法如何攻击它。画稿：

• 附加一个事件处理程序到你的输入框，这是引发上改变—使用“的onkeyup”，以检测输入框的变化。
• 等待用户停止键入，方法是在事件处理函数中设置一个计时器，如果尚未设置。 200-500ms是很好的等待时间。
  • 超时扮演着双重角色：
    • 它扼杀了我们的服务器，以防止过载请求。
    • 它影响我们对时间和我们打字习惯的看法。
• 如果我们超时了，我们不等待服务器⇒服务器发送一个字符串，我们至今。
• 如果我们还在等待服务器，请取消请求并再次询问。
  • 这部分是特定于应用程序的：我们不希望超载服务器，有时服务器不能很好地处理断开的连接。
  • 在示例中，我不取消XHR呼叫，但在提交新请求之前先等待它完成。
• 服务器响应相关结果，并立即显示。

在博客文章中，我将它作为一个小部件实现。很明显，确切的包装取决于你。