开源项目 `autocomplete.js` 使用教程

原创于 2024-10-11 07:20:54 发布 · 324 阅读

8 ·

CC 4.0 BY-SA版权

开源项目 `autocomplete.js` 使用教程

autocomplete.js autocomplete.js is lite, fast and stable. 项目地址: https://gitcode.com/gh_mirrors/auto/autocomplete.js

1. 项目介绍

autocomplete.js 是一个轻量级、快速且稳定的自动完成库，适用于各种前端开发场景。它不依赖于任何其他库，可以轻松集成到你的项目中，提供高效的自动完成功能。

2. 项目快速启动

安装

你可以通过 npm 或直接引入 CDN 来安装 autocomplete.js。

使用 npm 安装

npm install autocomplete.js

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/autocomplete.js"></script>

基本使用

以下是一个简单的示例，展示如何在 HTML 中使用 autocomplete.js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Example</title>
    <script src="https://cdn.jsdelivr.net/npm/autocomplete.js"></script>
</head>
<body>
    <input type="text" id="autocomplete" placeholder="Type to search...">

    <script>
        const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

        new Autocomplete('#autocomplete', {
            data: data,
            onSelect: (item) => {
                console.log('Selected:', item);
            }
        });
    </script>
</body>
</html>

自定义配置

你可以通过传递配置对象来自定义 autocomplete.js 的行为。例如，你可以更改匹配算法、设置最大显示项数等。

new Autocomplete('#autocomplete', {
    data: data,
    threshold: 1, // 最小匹配字符数
    maxResults: 5, // 最大显示结果数
    onSelect: (item) => {
        console.log('Selected:', item);
    }
});