14

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

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

4

9 回答 9

9

他们背后的技术是什么？

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

它们是如何工作的？

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

弦乐

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

图片来自维基百科文章：DAFSA，trie

于 2016-09-04T16:13:50.253 回答
8

这是使用 AJAX 完成的，这个网站上有一个很好的教程： AJAX Suggest Tutorial和WaybackMachine 版本，因为网站似乎关闭了。

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

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

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

于 2008-12-08T11:06:08.720 回答
4

他们通常使用 JavaScript：

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

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

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

jQuery自动完成插件

于 2008-12-08T11:09:31.740 回答
3

这很简单。

客户端：

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

服务器端：

  1. 所有单词都已按字母顺序分组
  2. 如果客户请求输入“ove”，则查找所有以 ove 开头的单词，按受欢迎程度排序
  3. 将热门匹配返回给客户端
于 2009-02-01T17:12:23.943 回答
1

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

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

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

于 2013-12-04T19:00:03.650 回答
0

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

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

于 2008-12-08T11:44:26.537 回答
0

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

  1. 新鲜的建议，
  2. 对长期数据的依赖，
  3. 区域依赖，
  4. 语言依赖
于 2015-11-09T08:38:06.703 回答
0

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...">

于 2022-03-01T01:29:11.770 回答
-1

这是 MooTools 的一个。

于 2009-02-01T17:19:36.223 回答