在前端开发中，经常需要使用自动完成输入框，以提高用户体验和准确性。npm 包 @edgebr/ng2-completer 是一个 Angular2+ 的自动完成输入框组件，它提供了很多丰富的功能和可定制化的选项。本文将介绍 @edgebr/ng2-completer 的使用方法，让你能够快速构建自己的自动完成输入框。
安装
@edgebr/ng2-completer 可以通过 npm 安装，使用以下命令进行安装：
npm install @edgebr/ng2-completer --save
引用
在 Angular 的项目中，可以通过以下方式引用 @edgebr/ng2-completer ：
-- -------------------- ---- -------
------ - ------------------ - ---- ------------------------
-----------
------------- -
---
--
-------- -
-------------------
---
--
---
--
------ ----- --------- - -基本用法
下面我们将介绍如何使用 @edgebr/ng2-completer 库来构建一个基本的自动完成输入框。
首先，在组件的 HTML 文件中添加以下代码：
<ng2-completer [(ngModel)]="searchStr" [dataService]="myService"></ng2-completer>
其中：
ng2-completer是指 @edgebr/ng2-completer 库中自动完成输入框的选择器。[(ngModel)]="searchStr"是指与输入框绑定的双向数据绑定的属性名。[dataService]="myService"是指提供数据的服务。
然后，在组件的 TypeScript 文件中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- ------------- - ---- ------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- ------------ --------------
------------------- ----------------- ----------------- -
---------------- - --------------------------------------------------------------
-
-其中：
completerService是 @edgebr/ng2-completer 库提供的共享服务，可以用于生成 CompleterData 对象。dataService是指由completerService.remote()生成的 CompleterData 对象，它指定了获取数据的方式。在上面的例子中，通过远程请求获取数据。
最后，在 app.module.ts 文件中添加 HTTP 模块：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
-----------
------------- ------
-------- -
-----------------
---
--
---
--
------ ----- --------- - -到这里，一个简单的自动完成输入框就实现了。
自定义选项
@edgebr/ng2-completer 支持自定义很多选项，这些选项可以全部或者部分自定义。
自定义模板
自动完成输入框的默认显示样式可以很好的适应大部分需求，但有时需要定制更灵活的显示效果，此时可以通过自定义模板来实现。
以下代码展示如何通过自定义模板来显示不同字段内容：
<ng2-completer [(ngModel)]="searchStr" [dataService]="myService" [overrideSuggestions]="true">
<ng-template let-item>
<div> {{ item && item.title }} </div>
<div> {{ item && item.description }} </div>
</ng-template>
</ng2-completer>在上面的代码中，我们使用了 <ng-template> 标签，内部使用了另外两个 div 标签分别展示了 item 对象的两个属性：title 和 description。
自定义数据
有时数据并不是简单的文本，而是包含了很多对象的属性，此时可以通过自定义数据定义更多属性，并在模板中使用。
以下代码展示如何通过自定义数据来扩展数据属性：
-- -------------------- ---- -------
--------- -------- -
--- -------
----- -------
------------ -------
-
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- ------------ --------------
---- - -
---- -- ----- ------- ------------ ----- -- -------
---- -- ----- ------- ------------ ----- -- -------
---- -- ----- ------- ------------ ----- -- -------
---- -- ----- ------- ------------ ----- -- -------
--
------------------- ----------------- ----------------- -
---------------- - --------------------------------- ------- --------
-
-在上面的例子中，我们定义了一个 TestData 接口，它有三个属性：id、name 和 description。我们实例化了四个 TestData 对象，保存在了一个数组中，然后使用 completerService.local() 将这个数组封装成一个 CompleterData 对象。这里面，我们通过两个字符串 'name' 将实际的输入字符串和数据字段对应起来。
在模板中，可以直接使用自定义数据的属性：
<ng2-completer [(ngModel)]="searchStr" [dataService]="myService" [overrideSuggestions]="true">
<ng-template let-item>
<div> {{ item && item.name }} </div>
<div> {{ item && item.description }} </div>
</ng-template>
</ng2-completer>示例代码
下面是一个完整的示例代码，在 data 目录下新建一个 data.ts 文件，并复制粘贴以下代码。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- ------------- - ---- ------------------------
--------- -------- -
--- -------
----- -------
------------ -------
-
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- ------------ --------------
---- - -
---- -- ----- ------- ------------ ----- -- -------
---- -- ----- ------- ------------ ----- -- -------
---- -- ----- ------- ------------ ----- -- -------
---- -- ----- ------- ------------ ----- -- -------
--
------------------- ----------------- ----------------- -
---------------- - --------------------------------- ------- --------
-
-在 app.component.html 文件中添加以下代码：
<ng2-completer [(ngModel)]="searchStr" [dataService]="dataService"></ng2-completer>
小结
@edgebr/ng2-completer 是一个非常实用的 Angular2+ 自动完成输入框组件，它提供了很多灵活的选项可以根据实际需求进行自定义。在前端开发中，自动完成输入框被广泛应用于客户端和服务器端，在表单、搜索、过滤数据和分类纠错等方面都发挥着重要作用。使用 @edgebr/ng2-completer 可以方便快速的构建自己的自动完成输入框，大大提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675b81e8991b448e3d56