Autocomplete.js 是一个基于 JavaScript 的轻量级自动完成库，可以用于前端网页中的搜索框等输入框。本教程将介绍如何使用 npm 安装 autocomplete.js 并实现自动完成功能。
步骤
1. 安装 autocomplete.js
使用 npm 安装 autocomplete.js：
--- ------- ---------------
2. 引入样式和脚本文件
在 HTML 文件中引入 autocomplete.js 的样式和脚本文件：
----- ---------------- --------------------------------------------------- ------- ----------------------------------------------------------
3. 编写 HTML 输入框
在 HTML 页面中添加一个输入框及其容器元素：
---- ------------------------------- ------ ----------------------- ----------- -------------------- ------
4. 初始化并配置 autocomplete.js
在 JavaScript 中初始化并配置 autocomplete.js：
----- ----- - ----------------------------------------------
----- --------- - --------------------------------------------------
-- --- ---------------
----- ------------ - --- ------------------- -
-- ---
----- --------- --------- ----------
-- -------
---------- --
-- -------
------ --
-- --------
-------------- ------
-- -----
--------- ------- ----- -- -
------ ----- -----------------------------------------
--
-- ---------
--------- --- ----- ----- -- -
------------------------ ------
-
---
-- -------- --------------- -
----------------------------------------------5. 运行并测试结果
运行代码后，在输入框中输入字符，即可看到自动完成的匹配项。可以通过修改数据源、最小匹配字符数、显示匹配项数量等参数来实现更多自定义功能。
示例代码
完整的示例代码如下：
--------- -----
----- ----------
------
----- ----------------
---------------------- ------------
----- ---------------- ---------------------------------------------------
-------
------
---- -------------------------------
------ ----------------------- ----------- --------------------
------
------- ----------------------------------------------------------
--------
----- ----- - ----------------------------------------------
----- --------- - --------------------------------------------------
----- ------------ - --- ------------------- -
----- --------- --------- ----------
---------- --
------ --
-------------- ------
--------- ------- ----- -- -
------ ----- -----------------------------------------
--
--------- --- ----- ----- -- -
------------------------ ------
-
---
----------------------------------------------
---------
-------
-------总结
使用 autocomplete.js 可以很方便地实现前端自动完成功能。通过修改不同的配置参数，可以实现自定义的功能和样式。希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/36044