autocomplete

一个 JavaScript 库，可让您快速构建自动完成体验

您需要开始的是：

• 将体验注入的容器
• 用于填充自动完成的数据
• 任何虚拟 DOM 解决方案（JavaScript、Preact、React、Vue 等）

填充自动完成结果的数据称为源。您可以在源中使用您想要的任何内容：一组静态搜索词、来自外部源（例如 Algolia 索引）的搜索结果、最近的搜索等等。

通过仅配置这两个必需的参数（ container和getSources ），您可以获得交互式自动完成体验。该库创建一个输入并提供交互性和可访问性属性，但您可以完全控制要输出的 DOM 元素。

文档 • API • Playground

安装

推荐的入门方法是使用autocomplete-js包。它包含呈现 JavaScript 自动完成体验所需的一切。

否则，如果您想从头开始构建渲染器，则可以安装autocomplete-core包。

所有自动完成包都可以在 npm 注册表中找到。

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

如果您不使用包管理器，则可以使用 HTML script元素：

 < script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
  const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script > 

用法

首先，您需要一个容器来容纳自动完成功能。如果您还没有容器，您可以在标记中插入一个容器：

 < div id = "autocomplete" > < / div >

然后，通过调用autocomplete函数并提供container将自动完成插入其中。它可以是 CSS 选择器或元素。

确保提供一个容器（例如div ），而不是input 。自动完成功能会为您生成一个完全可访问的搜索框。

 import { autocomplete } from '@algolia/autocomplete-js' ;

autocomplete ( {
  container : '#autocomplete' ,
  // ...
} ) ;

继续阅读我们的入门指南。

文档

该文档提供了几种了解自动完成库的方法：

• 阅读核心概念以了解有关基本原则的更多信息，例如Sources和State 。
• 按照指南了解如何构建常见的 UX 模式。
• 有关参数和选项的完整列表，请参阅API 参考。
• 尝试一下Playground ，您可以在其中 fork 一个基本的实现并进行尝试。

您可以在文档中找到更多信息。

支持

• GitHub 讨论

套餐

包裹	描述	文档
autocomplete-js	用于自动完成的 JavaScript 包	文档
autocomplete-core	用于构建自动完成体验的 JavaScript 核心原语	文档
autocomplete-plugin-recent-searches	一个将最近搜索添加到自动完成的插件	文档
autocomplete-plugin-query-suggestions	一个将查询建议添加到自动完成的插件	文档
autocomplete-plugin-algolia-insights	将 Algolia Insights 添加到自动完成的插件	文档
autocomplete-plugin-redirect-url	启用重定向 URL 的插件	文档
autocomplete-plugin-tags	用于管理和显示自动完成中的标签列表的插件	文档
autocomplete-preset-algolia	预设使用 Algolia 功能和自动完成功能	文档
autocomplete-theme-classic	自动完成的经典主题	文档

展示柜

查看人们使用自动完成功能构建的精彩体验：

文档搜索	阿尔戈利亚文档

在我们的展示柜中找到更多信息。

沙箱

使用自动完成检查沙箱。

执照

麻省理工学院