代码之家 › 专栏 › 技术社区 › gutch

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

dojo search ajax javascript

gutch · 技术社区 · 14 年前

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

有人知道使用Dojo实现这个的好方法吗?

以下是一些可能的选择:

内置小部件dijit.form.comboBox
这有非常相似的功能,但我只看到它用于有限的数据集。示例总是使用小列表(例如美国的50个州)并预加载整个数据集以进行客户端筛选。不过,我想我可以把它连接到服务器端搜索的dojox.data.jsonqueryreststore上,有人能确认这是否有效吗?
查询框 http://marumushi.com/code/querybox/
这个实现主要完成这项工作,但是它有一些小的错误,看起来不像是在维护它。在使用代码之前,我必须对它做一些修正。
梅德里克斯 http://blog.medryx.org/2008/09/10/dijitsearch-part-2/
这看起来也能完成任务,但是它被描述为“alpha级”代码,并且到代码的链接似乎被破坏了…

我可以做上面的工作之一,但我想知道是否有更好的选择。

1 回复 | 直到 7 年前

Eugene Lazutkin 7 年前

5年前,当Dojo处于0.2时,我实现了它:

虽然代码是古老的,但它是琐碎的,希望它能给你关于如何攻击它的想法。草图:

将事件处理程序附加到输入框中,该输入框在更改时触发-使用“onkeyup”检测输入框中的更改。
等待,直到用户通过在事件处理程序中设置计时器(如果尚未设置)停止键入。200-500毫秒是很好的等待时间。
- 超时具有双重作用:
  - 它限制了我们对服务器的请求,以防止过载。
  - 它影响我们对时间的感知和打字习惯。
如果超时时间到了,并且我们不等待服务器⇒向服务器发送一个到目前为止已经存在的字符串。
如果我们仍在等待服务器,请取消请求并再次询问。
- 这部分是应用程序特定的:我们不想让服务器过载,有时服务器无法很好地处理断开的连接。
- 在这个示例中,我不会取消XHR调用,但在提交新请求之前,请等待它先完成。
服务器响应相关结果,并及时显示。

在博客文章中,我把它作为一个小部件实现。显然,确切的包装是由你决定的。