自动填充建议如何运作?

时间:2008-12-08 10:52:11

标签: autocomplete

例如,如果您在Firefox中的右上角google / yahoo搜索框中键入内容,则会出现某种“建议自动完成”的内容。

另一个示例是在此问题预览下方的youtube搜索框和Stackoverflow标记编辑框中。他们是如何工作的?他们背后的技术是什么?

8 个答案:

答案 0 :(得分:8)

这是通过使用AJAX完成的,这个网站有一个很好的教程: AJAX Suggest TutorialWaybackMachine version, as website seems down

据我所知,有一个包含关键字和一些代码的数据库就可以了。

我正在学习如何使用它,实际上是为了工作。 :)

另一个资源是w3schools。他们也覆盖了它。

答案 1 :(得分:5)

  

他们背后的技术是什么?

如果您想知道下面使用了哪个数据结构,那么它的名称为“ trie ”,并且与尝试相比使用的空间更少,您可以使用“DAFSA” < / p>

  

它们如何运作?

两者都被实现为树,其中树的每个节点对应于字符串中的一个字符,并且之前出现的字符是稍后出现的字符的父节点。存储在Trie(左)和DAFSA(右)中的字符串“tap”,“tap”,“top”和“tops”,因此当您开始键入tap时,将根据键入的字符遍历树。并且基于分配给每个单词的一些权重显示建议,可以基于单词的使用频率来分配权重。

The strings "tap", "taps", "top", and "tops" stored in a Trie (left) and a DAFSA (right), EOW stands for End-of-word.

在最坏的情况下查找字符串是O(m)时间,其中m是字符串的长度。

图片正在从维基百科中引用:DAFSAtrie

答案 2 :(得分:3)

他们通常使用JavaScript:

  • 查看所有可能值的本地数组
  • 在后台请求另一个页面(即/autocomplete.php?q=partialText)。
  • 致电网络服务。

当JavaScript具有要显示的条目列表时,会修改页面以显示自动完成框。

如果您想在您的网站上放置一个自动填充框,我已经使用过并发现以下内容非常好。它也基于流行的jQuery框架。

jQuery autocomplete plugin

答案 3 :(得分:2)

这很简单。

客户方:

  1. 在表单字段中抓取键击
  2. 在击键时向服务器发出AJAX请求
    1. 如果立即输入另一个击键,请取消当前已过时的当前AJAX请求
    2. 使用表单字段中的更新字符生成新的AJAX请求
  3. 显示服务器对客户端的响应
  4. 服务器端:

    1. 所有单词都已按字母顺序排列
    2. 如果客户请求“ove”,请找到以ove开头的所有单词,按人气排序
    3. 将最热门的匹配项返回给客户

答案 4 :(得分:1)

Smashing Magazine 文章(下面的链接)中有一个优秀的开源国家/地区选择器,其中包含可用性挑战纯自动完成的讨论解决方案,并修复它们。

虽然我是用户体验,而不是开发人员,但我确信一个聪明的开发人员可以调整这个开源代码来处理其他类型的选择 - 而不仅仅是国家/地区的名称。 :)

免责声明:我与制作此国家/地区选择器的人没有任何联系。我碰巧知道它,我喜欢与开发人员分享有关可用性的信息,FWIW。

答案 5 :(得分:0)

对此有很多答案,因为它们有不同的实现方式。我们的AutoCompleter,您可以看到Stacked中的示例,通过引发一个事件然后在.ASPX页面的代码隐藏中处理,您可以使用您希望的任何控件填充ControlCollection。然而,我们在Stacked中只使用Literal控件,Text内容是锚链接。但是如果我们想要的话,我们可以添加复选框或图像。

如果您使用的是ASP.NET,我们的AutoCompleter是一个很好的起点。如果你正在使用“其他东西”,那么ScriptAculous AutoCompleter可能是另一个不错的起点......

答案 6 :(得分:0)

我最近也在处理自动完成功能,我们使用lucene来索引要在自动完成中显示的文本。使用lucene快速搜索。使用自动填充数据时要注意的事项:

  1. 建议的新鲜度,
  2. 对长期数据的依赖,
  3. 区域依赖,
  4. 语言依赖

答案 7 :(得分:-1)