前言
很多时候，在前端开发中我们需要处理用户输入，同时也希望能够让用户输入更加准确、快速。这时候，自动补全功能就十分实用了。而 ng2-simple-autocomplete 就是一款非常轻量、易用的 Angular 自动补全组件。
本文将为你详细介绍如何使用 npm 包 ng2-simple-autocomplete，以及如何在 Angular 应用中快速集成自动补全功能。
安装
首先，我们需要通过 npm 安装 ng2-simple-autocomplete 组件。
npm i ng2-simple-autocomplete --save
使用
基础用法
在 Angular 应用中，我们可以通过 ng2-simple-autocomplete 直接导入 AutoCompleteInputModule 模块并使用其中的 AutoCompleteInput 组件。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ----------------------- - ---- -------------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ------------ ------------------------- ---------- --------------- -- ------ ----- --------- --
在 HTML 模板中，我们可以通过指定 input 中的 [(ngModel)] 和 [data] 属性来设置自动补全功能。
<auto-complete-input [(ngModel)]="inputText" [data]="autocompleteData"></auto-complete-input>
其中，inputText 变量保存用户输入的字符串，autocompleteData 为自动补全组件展示的数据。
数据源
ng2-simple-autocomplete 组件默认接受一个包含字符串的数据源。在初始状态下，输入组件会显示数据源中的全部内容。
通常情况下，我们需要根据用户输入动态筛选数据源，从而显示和用户输入相匹配的数据。
ng2-simple-autocomplete 提供了两种数据源：
- 静态数据源，在应用加载时即可获得；
- 异步数据源，需要使用 HTTP 或其他方式从服务上获得。
静态数据源
在组件中使用静态数据源非常方便，只需在 .ts 文件中定义数组即可。
// 在 .ts 文件中定义数据源数组 autocompleteData = ['北京', '上海', '深圳', '杭州'];
在 HTML 模板中，只需将数据源数组传递给组件即可。
<auto-complete-input [(ngModel)]="inputText" [data]="autocompleteData"></auto-complete-input>
异步数据源
在实际开发中，静态数据源并不常见。通常需要根据用户输入从服务端获得数据。
我们可以通过在组件中监听输入框中的变化，并根据变化向服务器发送请求，获得数据源。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------------- - ---- --------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
---------- ------ - ---
----- -------- - ---
------------------- ------------------------ ------------------------ --
----------- ---- --
------------------------ ------- -
--------------------------------------------------------------- -- -
--------- - -----
---
-
-在 HTML 模板中，只需调用组件并注册 onInputChange 事件即可。
<auto-complete-input [(ngModel)]="inputText" [data]="data" (onInputChange)="onInputChange($event)"></auto-complete-input>
样式
ng2-simple-autocomplete 同样支持样式自定义。我们可以通过在 CSS 文件中配置样式，将组件调整至和应用风格一致。
CSS 文件可以通过 styles.css 文件引入。
<link rel="stylesheet" href="styles.css">
在 CSS 文件中，您可以使用以下样式配置自动补全组件的颜色、字体等属性。
-- -------------------- ---- -------
-- --------- --
-------------------- -
---------- -----
------------ ------ ---------- -----------
-
-- ---------- --
-------------------- --------- -
----------------- --------
-
-- ------- --
-------------------- --------- -
------ -----
-示例
<auto-complete-input [(ngModel)]="inputText" [data]="data" (onInputChange)="onInputChange($event)"></auto-complete-input>
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------------- - ---- --------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
---------- ------ - ---
----- -------- - ---
------------------- ------------------------ ------------------------ --
----------- ---- --
------------------------ ------- -
--------------------------------------------------------------- -- -
--------- - -----
---
-
-结语
ng2-simple-autocomplete 是一款非常简单易用的 Angular 自动补全组件，通过本文的介绍，您应该已经能够快速在 Angular 应用中添加自动补全功能了。当然，在实际开发中，您还可以根据需求对样式、数据源等进行更加详细、复杂的调整。
希望本文能够对您有所帮助，祝您在前端开发的道路上越来越顺利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4a81e8991b448e5ced