简介
在前端开发中，我们经常会遇到需要实现自动补全的需求。而 @lucasolivamorim/ng2-completer 是一个基于 Angular 和 RxJS 的自动补全组件库，可以提供便捷的开发体验和高效的自动补全效果。
本文将介绍如何使用 @lucasolivamorim/ng2-completer 实现自动补全功能，包括基本使用、自定义模板、异步数据加载等内容。我们将使用 Angular 10 和 @angular/cli 来创建示例代码。
安装
首先需要安装 @lucasolivamorim/ng2-completer：
npm install @lucasolivamorim/ng2-completer --save
基本使用
我们将在 AppComponent 中使用自动补全组件，第一步是导入 Ng2CompleterModule 模块：
-- -------------------- ---- -------
------ - ------------------ - ---- ---------------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接下来，我们在模板中添加自动补全组件：
<ng2-completer
[data]="['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming']"
[minSearchLength]="0"
[placeholder]="'Type here to search...'"
[selected]="onSelected">
</ng2-completer>这个组件将会显示一个输入框，输入关键字后会自动显示下拉列表。其中，data 属性表示下拉列表的数据，minSearchLength 属性表示至少输入多少个字符后才会显示下拉列表，placeholder 属性表示输入框占位符，selected 是当选中一项时触发的回调函数。
我们需要在组件类中提供一个回调函数来处理选中结果：
onSelected(selected: any) {
console.log(selected.title);
}这里我们简单地将选中项的 title 输出到控制台上。现在运行应用，你应该可以看到一个自动补全输入框并且可以正常工作了。
自定义模板
@lucasolivamorim/ng2-completer 还提供了自定义模板的功能，可以方便地定制自动补全组件的外观和交互。我们可以创建一个自定义模板来控制下拉列表的呈现方式。
首先，我们通过 @ViewChild 获取到 Ng2CompleterComponent 实例，然后调用其 public 方法 dataService.subscribeToResults 即可在结果发生变化时处理自己的逻辑：
-- -------------------- ---- -------
---------------------------------
------- ----------------- ----------------------
------- ------------- ---------
---------- -
----------------- - ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------- ------------ ------------ ------------ ---------------- -------------------------------------------------------- -------------- ---------------- -------------------------------------------------------------------------- ---------------------------------
---------------- - -----------------------------
--------------------------------------------- ---------------- -- -
-------------- - -----------------------------
---------- - --------------------- --
-------------------------------------------------
--
---
-我们将原始数据保存到 originalData 数组中。然后，我们在 dataService.subscribeToResults 中对结果进行过滤处理，只显示与用户输入匹配的内容。
接下来，我们创建一个用于显示列表项的自定义模板，在模板中可以调用 {{ title }} 来显示每一项的标题：
<div *ngIf="searchStr">
<div *ngFor="let item of items">
{{ item.title }}
</div>
</div>接着，我们将自定义模板的代码插入到 Ng2CompleterComponent 中：
-- -------------------- ---- -------
--------------
-----------------------
---------------------------
---------------------
-------------------- ---- -- -----------
--------------------------
--------------------------------
------------ ------------------------ ------------------------- -----------------
---- ----------- ---- -- -------
-- ---------- --
------
--------------
----------------以上代码中，我们将自定义模板插入到了 ng-template 标签中，并通过 let-search 和 let-item 分别表示搜索关键词和每一项的数据模型。然后我们使用 ngIf 判断 searchStr 是否存在，以及在 ngFor 中使用 items 来循环显示每一项的数据。
现在再次启动应用，你应该可以看到自定义的自动补全组件了。
异步数据加载
可以通过异步方式加载数据，这在处理大量数据时非常有用。我们可以使用 rxjs 的 Observable 对象，并在数据加载完成时触发 subscribeToResults 回调函数：
-- -------------------- ---- -------
------- ---------- -------
------- ------------ ---------------------
------- ------ ----------------
---------- -
-------------- - ---
---------------- - --- ---------------------------------------------------------------- -----------
--------------------------------------------- ---------------- -- -
-------------- - -----------------------------
---------- - --------------------- --
-------------------------------------------------
--
---
----------------------------------------- --------------
------- ---- -- ----------------
------------------
-----------------------
------------------ ------- -- -
------------------------------------------ -- ----
---
-在这里我们使用了 TpyeScript 上的类型检查，以确保一切都可以在 编译时进行检查。
接下来，我们实现 RemoteDataService 类：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------ - -------------- -------------- ---------------- - ---- ---------------------------------
------ ----- ----------------- ------- -------------------- -
------------------- ----------- ------- ------- ----- ----------- -
--------
-
------ ------------ -------- --------------------------- -
------ -------------------------------------------------------------------
------------ -- -
------ ----------------- -- --------------------------
-
---
-
------ ------------------- ----- ------------- -
------ - ------ ----------- ------------ --------- --
-
-这里是一个自定义的数据服务实现例子，而且需要实现 search 和 convertToItem 方法。在这个例子中，search 方法会调用 HttpClient 发送请求，并使用 map 将响应转换为 SearchCompleterItem 数组。方法 convertToItem 将单个对象转换为 SearchCompleterItem，然后将其处理为结果。
最后，我们需要在模板中添加一个搜索框：
-- -------------------- ---- -------
------ ----------- ------------------- ----------------------------------------
--------------
-----------------------
---------------------------
---------------------
--------------------------
---------------
--------------------------------
------------ ------------------------ --------------------------
---- ----------- ---- -- -------
-- ---------- --
------
--------------
----------------在这里，我们使用 input 元素绑定 searchStr 变量，并使用 ng2-completer 元素来控制显示自动补全内容。在数据加载周期中，我们还可以使用 isOpen 属性来控制是否显示自动补全内容。
至此，我们已经完成了一个高效的自动完成功能，可以使用 rxjs 和 angular 来处理异步请求和大规模数据。@lucasolivamorim/ng2-completer 带来了非常好的性能，同时可以应对不少的情景, 使用起来非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675281e8991b448e3d10