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	自動完成的經典主題	文件

展示櫃

查看人們使用自動完成功能建立的精彩體驗：

文件搜尋	阿爾戈利亞文檔

在我們的展示櫃中找到更多資訊。

沙箱

使用自動完成檢查沙箱。

執照

麻省理工學院