前言
在前端开发中，自动补全是一个非常常见的需求。一般来说，我们可以在前端使用 JavaScript 实现这个功能，但是这需要开发者自己去实现并且需要考虑很多细节，比如如何进行数据过滤、如何进行列表展示等等。而现在我们可以使用 npm 包 np-autocomplete，这是一个非常实用的工具包，可以帮助我们快速实现自动补全功能。
安装 np-autocomplete
我们可以在终端中使用以下命令安装 np-autocomplete：
npm install np-autocomplete
使用 np-autocomplete
np-autocomplete 提供了非常简洁的 API，只需要调用一个函数即可实现自动补全功能。下面我们以一个简单的示例来说明如何使用 np-autocomplete。
HTML 代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ---------- ------ ---------------- ----------------------------------------------------------------- ------- ------ ----- --------------- -------- ----------- ------------------ ------- -------- ------------------------------------------------------------------------ -------- ---------------------- ------- -------
JavaScript 代码
-- -------------------- ---- -------
-- -- --------------- -
----- -------------- - ---------------------------
-- ------- --- --
----- ----------- - ----------------------------------------
-- ---------
----- ------------ - --- ------------------------- -
-------- --------------- -
-- ----------
------ --- ----------------- ------- -- -
------------- -- -
----- ---- - --------- --------- --------- ------------------------ -- -
------ -------------------- - ---
---
--------------
-- -----
---
-
---在上面的代码中，我们首先引入 np-autocomplete 库，然后获取到搜索输入框的 DOM 对象，接着使用 Autocomplete 类初始化自动补全组件。在 Autocomplete 类构造函数中，我们需要传入两个参数：搜索输入框 DOM 对象和配置对象。配置对象包含了一个 getData 函数，这个函数用于获取匹配的数据。getData 函数接受一个参数 query，表示当前输入框中的文本，我们需要根据这个参数去获取匹配的数据。在上面的代码中，我们使用了 ES6 中的 Promise 对象模拟异步获取数据。
效果演示
API 参考
Autocomplete 类
构造函数
new Autocomplete(textInput: HTMLInputElement, options: object)
textInput: 搜索输入框 DOM 对象，必须是一个 HTMLInputElement 实例。options: 配置对象，包含以下属性：getData(query: string): 获取数据的回调函数，必须返回一个 Promise 对象。回调函数接受一个参数query，表示当前输入框中的文本。
结语
在这篇文章中，我们介绍了 npm 包 np-autocomplete 的使用方法。np-autocomplete 是一个非常实用的工具包，可以帮助我们快速实现自动补全功能。如果你正在开发自动补全功能，那么不妨试试使用它吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab881e8991b448d8513