介绍
在前端开发中，有时需要实现一个搜索框自动补全的效果。通过 npm 包 veams-utility-type-ahead 可以轻松实现此功能。本文将介绍如何使用该 npm 包以及其使用的原理。
安装
在命令行中输入以下命令进行安装：
npm install veams-utility-type-ahead
引入
在需要使用该功能的页面中引入 veams-utility-type-ahead 模块：
import typeAhead from 'veams-utility-type-ahead';
使用
使用该模块需要进行两部分操作：配置和初始化。下面将分别对这两部分进行介绍。
配置
在使用该模块前，需要进行一些配置。下面是一些常用的配置项：
-- -------------------- ---- -------
----- ------ - -
-------------- -----------------------
------------- ----------------------
------------- ----------------------
---------------- ------------
--------- --
--------- ---
--------- ------- ------ ----- -- -
----- ----- - ---
-- ----- -------- -----
------------
-
--inputSelector：输入框的选择器listSelector：下拉列表的选择器itemSelector：下拉列表中每一项的选择器activeClassName：下拉列表中当前项的样式名minChars：过滤项需要的最小字符数maxItems：下拉列表最多显示多少项getItems：获取下拉列表项的函数
getItems 函数需要返回一个 Promise，Promise 的 resolve 参数为所有下拉列表项的数组。函数中的 value 参数为输入框中的值，count 参数为下拉列表最多显示多少项。
在实际应用中，getItems 函数需要根据输入框中的内容从服务器端获取合适的下拉列表项数组。
初始化
前面我们已经介绍了如何进行配置，下面是如何进行初始化：
typeAhead.init(config);
示例代码
下面是一个完整的示例，可以直接运行查看效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------------------- ------------
-------
----------------- -
-------- -----
--------- ---------
-------- --
----------- -----
------- --
-------- --
----------------- ------
------ -----
----------- --- --- --- ------- -- -- -----
-
----------------- -
-------- -----
------- --------
-
--------------------------- -
----------------- --------
-
--------
-------
------
------ ----------- ----------------------------
--- ------------------------- -----------------------
------- ----------------------------------------------------------
--------
----- ------ - -
-------------- -----------------------
------------- ----------------------
------------- ----------------------
---------------- ------------
--------- --
--------- ---
--------- ------- ------ ----- -- -
----- ----- - ---
--- ---- - - -- - - --- ---- -
---------------------------
-
------------
-
--
-----------------------
---------
-------
-------总结
通过 veams-utility-type-ahead 模块，我们可以轻松实现搜索框的自动补全功能。同时，该模块的配置项也非常灵活，能满足大部分自动补全场景的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1e81e8991b448e6eaf