自动完成建议如何工作？答案

【问题标题】：How do autocomplete suggestions work?自动完成建议如何工作？
【发布时间】：2022-03-02 10:06:48
【问题描述】：

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

另一个例子是在这个问题预览下方的 youtube 搜索框和 Stackoverflow 标签编辑框中。它们是如何工作的？它们背后的技术是什么？

【问题讨论】：

标签： autocomplete

【解决方案1】：

它们背后的技术是什么？

如果您想知道下面使用的是哪种数据结构，那么它称为“trie”，并且与尝试相比使用更少的空间，您可以使用 “DAFSA”

它们是如何工作的？

两者都实现为一棵树，其中树的每个节点对应于字符串中的一个字符，并且出现在前面的字符是后面出现的字符的父级，例如字符串“tap”、“taps”、“top”和“tops”存储在 Trie（左）和 DAFSA（右）中，因此当您开始键入 tap.. 根据键入的字符遍历树并根据分配给每个单词的某些权重显示建议，可以根据单词的使用频率分配权重。

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

图片引用自维基百科文章：DAFSA,trie

【讨论】：

【解决方案2】：

这是使用 AJAX 完成的，这个网站有一个很好的教程： AJAX Suggest Tutorial 和 WaybackMachine version, as website seems down。

据我所知，一个带有关键字和一些代码的数据库就是它的全部内容。

我现在正在学习如何实际使用它，用于工作。 :)

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

【讨论】：

我知道这是 9 年前的答案，但这是一个完美的例子，说明为什么不应该只链接教程。现在该网站已关闭 :( 这个问题在how autocomplete works 中排名第一
已在互联网档案版本中编辑，感谢您的提醒！不过，我认为在答案中包含一个完整的教程并不是一个好主意——版权除外——因为那里有很多 AJAX 教程，而且可能比这个 9 岁的教程更好:)
不，它不是 ajax……它是超快的……他们一定在做其他事情
@MartinZvarík：可能是 Python 或 Node 在 websocket 上，如 socketio。我现在正在学习 Python，除了 Node（我很熟悉）之外，它是我见过的最快的后端语言。这几乎是瞬间的。

【解决方案3】：

他们通常使用 JavaScript：

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

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

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

jQuery autocomplete plugin

【讨论】：

【解决方案4】：

这很简单。

客户端：

在表单字段中获取击键
在击键时向服务器发出 AJAX 请求
1. 如果立即输入另一个按键，请取消当前的 AJAX 请求，因为它现在已过时
2. 在表单字段中使用更新的字符请求新的 AJAX
显示服务器对客户端的响应

服务器端：

所有单词都已按字母顺序分组
如果客户请求输入“ove”，则查找所有以 ove 开头的单词，按受欢迎程度排序
将热门匹配返回给客户端

【讨论】：

【解决方案5】：

Smashing Magazine 文章（下面的链接）中有一个优秀的开源国家选择器，其中讨论了 可用性挑战 与 普通自动完成 strong> 解决方案，并修复它们。

虽然我是 UX，而不是 Dev，但我确信聪明的开发人员可以调整此开源代码来处理其他类型的选择，而不仅仅是国家/地区的名称。 :)

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

【讨论】：

【解决方案6】：

有很多答案，因为它们有不同的实现。我们的 AutoCompleter（您可以在 Stacked 中看到一个示例）通过引发一个事件来工作，然后在 .ASPX 页面的代码隐藏中处理该事件，您可以从该页面中使用所需的任何控件填充 ControlCollection。然而，我们在 Stacked 中只使用文本内容作为锚链接的文字控件。但如果我们愿意，我们可以添加复选框或图像...

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

【讨论】：

【解决方案7】：

我最近也在研究自动完成功能，我们使用 lucene 来索引要在自动完成中显示的文本。使用 lucene 搜索速度很快。使用自动完成数据时需要注意的事项：

建议的新鲜度，
对长期数据的依赖，
区域依赖，
语言依赖

【讨论】：

【解决方案8】：

2022 年更新

标记的答案有点过时了。建议自动完成表面上看起来很神奇，但实际上它是在引擎盖下的

快速异步通信和
搜索关键字列表

向您的数据库发送一个字符串，然后以 JSON 格式返回响应以循环/迭代。然后按照用户类型重复。

YELP Fusion 就是一个很好的例子。

以下是小型库 autocomplete.js 的示例

$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(".sbx-custom__input").autocomplete({
source: availableTags
});
});

<!--jqueryui-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<!--autocompletejs-->
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">


<!--input-->
<input class="sbx-custom__input" autocomplete="on" required="required" placeholder="autocomplete...">

【讨论】：

【解决方案9】：

Here is one for MooTools.

【讨论】：