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

Question

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

有谁知道使用 Dojo 实现这一点的好方法吗？

以下是一些潜在的选择：

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

• 查询框http://marumushi.com/code/querybox/
  这个实现主要完成了这项工作，但它有一些小错误，看起来并没有得到维护。在使用它之前，我必须对代码进行一些错误修复。

• Medryx http://blog.medryx.org/2008/09/10/dijitsearch-part-2/
  这看起来也可以完成这项工作，但它被描述为“alpha 级”代码，并且代码的链接似乎已损坏......

我可能可以完成上述工作之一，但我想知道是否有更好的选择。

Answer 1

我在 5 年前 Dojo 0.2 时实现了它：

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

虽然代码很古老，但它是微不足道的，希望它能给你一些关于如何攻击它的想法。粗略的草图：

• 将事件处理程序附加到您的输入框，该处理程序会在更改时触发 - 使用“onkeyup”来检测输入框中的更改。
• 如果尚未设置计时器，请等待用户停止输入，方法是在事件处理程序中设置计时器。 200-500 毫秒是很好的等待时间。
  • 超时起到双重作用：
    • 它会限制我们对服务器的请求以防止过载。
    • 它会影响我们对时间的感知和打字习惯。
• 如果我们的超时时间到了，并且我们不等待服务器 ⇒ 向服务器发送我们目前拥有的字符串。
• 如果我们仍在等待服务器，请取消请求并再次询问。
  • 这部分是特定于应用程序的：我们不希望服务器过载，有时服务器无法很好地处理断开的连接。
  • 在示例中，我没有取消 XHR 调用，而是先等待它完成，然后再提交新请求。
• 服务器响应相关结果，并及时显示。

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