Autocomplete.js 是一个基于 JavaScript 的轻量级自动完成库，可以用于前端网页中的搜索框等输入框。本教程将介绍如何使用 npm 安装 autocomplete.js 并实现自动完成功能。
步骤
1. 安装 autocomplete.js
使用 npm 安装 autocomplete.js：
npm install autocomplete-js
2. 引入样式和脚本文件
在 HTML 文件中引入 autocomplete.js 的样式和脚本文件：
<link rel="stylesheet" href="node_modules/autocomplete-js/dist/style.css"> <script src="node_modules/autocomplete-js/dist/index.js"></script>
3. 编写 HTML 输入框
在 HTML 页面中添加一个输入框及其容器元素：
<div class="autocomplete-container"> <input id="autocomplete-input" type="text" placeholder="输入关键词"> </div>
4. 初始化并配置 autocomplete.js
在 JavaScript 中初始化并配置 autocomplete.js：
-- -------------------- ---- ------- ----- ----- - ---------------------------------------------- ----- --------- - -------------------------------------------------- -- --- --------------- ----- ------------ - --- ------------------- - -- --- ----- --------- --------- ---------- -- ------- ---------- -- -- ------- ------ -- -- -------- -------------- ------ -- ----- --------- ------- ----- -- - ------ ----- ----------------------------------------- -- -- --------- --------- --- ----- ----- -- - ------------------------ ------ - --- -- -------- --------------- - ----------------------------------------------展开代码
5. 运行并测试结果
运行代码后，在输入框中输入字符，即可看到自动完成的匹配项。可以通过修改数据源、最小匹配字符数、显示匹配项数量等参数来实现更多自定义功能。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ------------ ----- ---------------- --------------------------------------------------- ------- ------ ---- ------------------------------- ------ ----------------------- ----------- -------------------- ------ ------- ---------------------------------------------------------- -------- ----- ----- - ---------------------------------------------- ----- --------- - -------------------------------------------------- ----- ------------ - --- ------------------- - ----- --------- --------- ---------- ---------- -- ------ -- -------------- ------ --------- ------- ----- -- - ------ ----- ----------------------------------------- -- --------- --- ----- ----- -- - ------------------------ ------ - --- ---------------------------------------------- --------- ------- -------展开代码
总结
使用 autocomplete.js 可以很方便地实现前端自动完成功能。通过修改不同的配置参数，可以实现自定义的功能和样式。希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36044
