前言
在前端开发中，我们常常会涉及到输入框自动补全的需求，而且自动补全的词条需要与后端数据库或者 API 进行交互。这时，我们可以用到 @mobsolutions/ngx-dadata 这个 npm 包，该包提供了一种输入自动补全的方式，支持根据关键字从后端获取数据，也支持自定义提供数据。
安装
在终端中输入以下指令来安装此 npm 包：
--- ------- ------------------------
使用
在使用前，需要导入 NgxDadataModule 模块并将其包含在 import 数组中。具体使用步骤如下：
导入 NgxDadataModule 模块
------ - --------------- - ---- ---------------------------
-----------
-------- -
-- ----- ----------
----------------
--
--
------ ----- --------- --页面 HTML 代码
在输入框中添加 ngx-dadata 标签，并绑定相关属性和方法，示例代码如下：
---- ----- ----- --- ------ --------- ------------------- ----------------- --------------------------------- ------------ --
[(ngModel)]="model"：指定输入框绑定的变量。[config]="config"：配置项，具体参数可以参考 ngx-dadata。其中，apiKey是前往 dadata.ru 注册后获取的 API key，然后使用此 API key 可以从第三方接口中获取数据，比如地址、名称等等。(onSelected)="onSelected($event)"：选中某个选项后，触发的回调函数。其中，$event是当前选中的值。
组件 TypeScript 代码
在组件中，需要指定相关属性并在 onSelected 方法中处理选中事件，示例代码如下：
------ - ---------- --------- - ---- ----------------
------ - ------------------ - ---- ---------------------------
------------
--------- -----------
--------- ------
--
------ ----- ------------ -
------------------------------ ------- -------------------
------ - -
-- ---- ---------
--
------ ----
---------------- -
--------------------- ------- ------
-
-自定义返回数据
如果不需要从后端获取数据，可以使用 data 参数自定义返回数据，如下所示：
------ --------- ------------------- --------------- ------ ------ ------- --
总结
以上是 @mobsolutions/ngx-dadata 这个 npm 包的使用教程，感谢大家的阅读。通过本篇文章，我们可以了解到如何使用这个 npm 包，并能在实际项目中应用。同时，也希望读者能够继续深入学习更多的前端知识。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067380890c4f72775841d5