在前端开发过程中，搜索框的自动补全功能是很实用的，而 ngx-auto-complete 是一个非常好用的 npm 包，它提供了简单易用的自动补全功能。
安装 ngx-auto-complete
首先，需要安装 ngx-auto-complete。可以通过 npm 命令来安装：
npm install ngx-auto-complete --save
安装完成之后，就可以开始使用 ngx-auto-complete 了。
使用 ngx-auto-complete
使用 ngx-auto-complete 的关键在于定义数据源，这可以通过定义一个列表或者从 API 中获取数据来实现。
定义列表数据源
如果已经有一个数据列表，可以使用 ngx-auto-complete 提供的 SimpleDataSource 类来定义数据源。例如：
import { SimpleDataSource } from 'ngx-auto-complete';
const options = ['Angola', 'Argentina', 'Australia', 'Austria', 'Canada', 'China', 'Denmark'];
const dataSource = new SimpleDataSource(options);从 API 中获取数据源
如果需要从 API 中获取数据源，则需要使用 RemoteDataSource 类。这可以使用 HttpClient 来发送请求并接收响应。例如：
import { RemoteDataSource } from 'ngx-auto-complete';
import { HttpClient } from '@angular/common/http';
const endpoint = 'https://my-api-url.com/countries';
const dataSource = new RemoteDataSource(endpoint, this.httpClient);绑定数据源
现在，已经有了数据源，可以将其绑定到 ngx-auto-complete 指令上。在 HTML 模板中，可以这样使用：
<input type="text" auto-complete [datasource]="dataSource" />
这样，就可以在输入框中使用自动补全的功能了。
进一步配置 ngx-auto-complete
还可以通过提供其他参数进一步配置 ngx-auto-complete。
提供占位符
可以提供一个占位符，以便在搜索框中提供一些提示信息。例如：
<input type="text" auto-complete [datasource]="dataSource" placeholder="搜索国家" />
可以设置 minimumCharacters 字段
可以设置 minimumCharacters 字段，如果输入的字符数不足 minimumCharacters，则不会触发自动补全。例如：
<input type="text" auto-complete [datasource]="dataSource" minimumCharacters="3" placeholder="搜索国家" />
这里，如果输入的字符不到 3 个，则不会出现自动补全。
可以设置 debounceTime 字段
可以设置 debounceTime 字段，表示在用户输入文本后等待多长时间才开始搜索。例如：
<input type="text" auto-complete [datasource]="dataSource" debounceTime="500" placeholder="搜索国家" />
这里，等待 500 毫秒后，才开始搜索数据源。
自定义模板
可以自定义模板，在自动补全下拉列表中显示更多内容。例如：
-- -------------------- ---- -------
------ ----------- ------------- ------------------------- ------------------ --
------------ --------------------- ---------
-----
-- ---------- --
----- --------------- --------- ---------
----- -------------------- -------------- ---------
------
--------------这里，定义了一个自定义模板，使用了 ng-template 模块，展示了每个数据项的标签、代码和所属的大洲。
一个完整的示例
下面是一个完整的使用示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- --------------------
------------
--------- -----------
--------- -
---- ------------------
------ ----------- ------------- ------------------------- ------------------------ ------------------ --
------------ --------------------- ---------
-----
-- ---------- --
----- --------------- --------- ---------
----- -------------------- -------------- ---------
------
--------------
------
--
--
------ ----- ------------ -
---------- - --- ------------------
- ------ --------- ----- ----- ---------- -------- --
- ------ ------------ ----- ----- ---------- ------ -------- --
- ------ ------------ ----- ----- ---------- --------- --
- ------ ---------- ----- ----- ---------- -------- --
- ------ --------- ----- ----- ---------- ------ -------- --
- ------ -------- ----- ----- ---------- ------ --
- ------ ---------- ----- ----- ---------- -------- --
- ------ -------- ----- ----- ---------- -------- --
- ------ --------- ----- ----- ---------- -------- --
- ------ ---------- ----- ----- ---------- -------- --
- ------ -------- ----- ----- ---------- ------ --
- ------ -------- ----- ----- ---------- ------ --
- ------ --------- ----- ----- ---------- -------- --
- ------ ------ -------- ----- ----- ---------- -------- --
---
-在这个示例中，定义了一个数据列表，它包含了一些国家名称、代码和所属大洲。将其绑定到自动补全组件上，并使用自定义模板来显示更多内容。
总结
ngx-auto-complete 是一个非常实用的 npm 包，提供了简单易用的自动补全功能。可以通过定义数据源、提供各种参数来进一步配置 ngx-auto-complete。在实际开发中使用 ngx-auto-complete 可以提高用户体验，并提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1381e8991b448d8bdf