algolia/autocomplete

这是什么？

核心功能

• 01只需提供容器和 getSources 函数即可得到可用的搜索框。
• 02自动生成带键盘导航和 ARIA 属性的无障碍输入框。
• 03结果列表可使用自定义 DOM 结构渲染。
• 04提供最近搜索、查询建议和 Algolia Insights 等插件。
• 05兼容原生 JavaScript、Preact、React 和 Vue。

适用场景

• 为文档站或内容网站添加边输入边搜索的搜索框。
• 在站内搜索栏中展示最近搜索和查询建议。
• 基于自定义结果渲染构建组合框或命令面板。

快速上手

1. 1

   使用 npm 安装 autocomplete-js 包

   npm install @algolia/autocomplete-js
2. 2

   在 HTML 中添加一个容器 div

3. 3

   导入 autocomplete 并传入 container 和 getSources 选项调用

使用前须知

• !除基本配置外，需要自行编写数据源和结果渲染代码。

标签

常见问题

autocomplete 是什么？

一个用于构建自动补全与搜索建议输入框的 JavaScript 库，数据源与界面渲染均可自定义。 Autocomplete 是一个用于构建自动补全搜索体验的 JavaScript 库。开发者只需提供一个容器元素和一个 getSources 函数，返回需要展示的建议内容，库会负责生成输入框、处理键盘交互并添加无障碍属性，结果列表的 HTML 结构则由开发者自行控制。

autocomplete 可以免费使用吗？用的什么许可证？

autocomplete 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

autocomplete 还在维护吗？

活跃维护中。autocomplete 最近一次提交是在 2026年10月22日。

autocomplete 适合用来做什么？

为文档站或内容网站添加边输入边搜索的搜索框。 在站内搜索栏中展示最近搜索和查询建议。 基于自定义结果渲染构建组合框或命令面板。

autocomplete 怎么安装和运行？

使用 npm 安装 autocomplete-js 包: npm install @algolia/autocomplete-js 在 HTML 中添加一个容器 div 导入 autocomplete 并传入 container 和 getSources 选项调用

在哪里获取 autocomplete？

源代码和安装说明在 GitHub 上：https://github.com/algolia/autocomplete