在前端开发中，我们经常需要使用到自动补全功能，以提升用户体验。而 ngui-angular2-auto-complete 就是一个很好用的 npm 包，可以让我们更方便地实现自动补全功能。本文将对该 npm 包进行详细介绍，并提供示例代码。
什么是 ngui-angular2-auto-complete
ngui-angular2-auto-complete 是一个 Angular 2+ 的 npm 包，基于 Bootstrap 和 Font Awesome，可以很方便地实现自动补全功能。该包支持异步和同步数据源，以及自定义模板和选项格式。
该包具有以下特性：
- 支持异步和同步数据源
- 支持模板和选项格式的自定义
- 支持属性和输出事件的自定义
- 基于 Bootstrap 和 Font Awesome
安装 ngui-angular2-auto-complete
安装 ngui-angular2-auto-complete 非常简单，只需要在 npm 中执行以下命令即可：
npm i ngui-angular2-auto-complete --save
如何使用 ngui-angular2-auto-complete
使用 ngui-angular2-auto-complete 也非常简单。在 Angular 2+ 项目中，只需先引入该包，然后在需要添加自动补全功能的页面中使用 ngui-auto-complete 标签即可。
HTML
在页面上添加 ngui-auto-complete 标签，并设置一些属性。下面是一个简单的示例：
-- -------------------- ---- -------
-------------------
---------------
---------------------
-----------------------
---------------------------------
-----------------------------
-------------------------------------
---------------------------------
---------------------------------
--------------------
---------------------------------------
---------------------------------------
----------------------其中，常用的属性和输出事件有：
| 属性/输出事件 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 数据源 | Item[] | [] |
| minimumCharacters | 最少输入字符数 | number | 1 |
| headerTemplate | 自定义头部模板 | TemplateRef | null |
| itemTemplate | 自定义选项模板 | TemplateRef | null |
| notFoundTemplate | 自定义无匹配项模板 | TemplateRef | null |
| valueFormatter | 选中项的值格式化函数 | Function | |
| inputFormatter | 输入项的值格式化函数 | Function | |
| debounceTime | 输入时的延迟时间 (ms) | number | 300 |
| placeholder | 输入框的提示信息 | string | 'Search' |
| placeholderNoData | 无数据时输入框的提示信息 | string | 'No data found' |
| opened | 表示自动补全是否打开 | boolean | false |
| loading | 表示数据是否在加载 | boolean | false |
| disabled | 表示自动补全是否不可用 | boolean | false |
| inputId | 输入框的 ID | string | |
| clearOnBlur | 是否在失焦时清空输入框 | boolean | true |
| clearOnClick | 是否在点击输入框时清空输入框 | boolean | false |
| clearOnSelect | 是否在选中项后清空输入框 | boolean | false |
| selectFirstOnBlur | 是否在失焦时选中第一项 | boolean | false |
| acceptInputAfterFirstSelection | 是否允许在选中项后继续输入 | boolean | false |
| selectOnClick | 是否在点击选项时选中该项 | boolean | false |
| selectOnTab | 是否在按 Tab 键时选中第一项 | boolean | false |
| selectOnEnter | 是否在按回车键时选中第一项 | boolean | false |
| valueChanged | 值改变时的输出事件 | EventEmitter | |
| itemSelected | 选中项时的输出事件 | EventEmitter |
TS
在组件的 TS 文件中，先引入输入输出事件和数据类型，然后声明一些变量。
-- -------------------- ---- -------
------ - ---------- ------- ----------- - ---- ----------------
------ - ---- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------ ------- ------ - -
---- ---- ------ -----------
---- ---- ------ ---------
---- ---- ------ -------
---- ---- ------ ---------
---- ---- ------ ------------
---- ---- ------ ------------
---- ---- ------ ---- -------------
---- ---- ------ -----------
---- ---- ------ -----------
---- ----- ------ ----------
---- ----- ------ ------------
---- ----- ------ -------------
--
------ --------------- -----------------
------ ------------- -----------------
------ ----------------- -----------------
------------- --
---------- --
-- ------------ --
--------------------- ---- -
-------------------
-
-- ------------ --
-------------------- ---- -
------------------
-
-- -------------- --
-------------------- ---- -
------ -------------------------
-
-- -------------- --
-------------------- ---- -
------ -------------------------
-
-自定义模板
ngui-angular2-auto-complete 支持自定义模板，在模板中，我们可以自由地控制自动补全的样式和交互。
以下是一些常用的模板，供参考。
头部模板
头部模板中可以添加一些提示性文字，以便用户更好地理解自动补全的功能。
<ng-template #headerTemplate>
<div class="header">
<div class="title">
Select a technology
</div>
<div class="divider"></div>
</div>
</ng-template>选项模板
选项模板中可以添加一些图标或其他交互元素，以便用户更好地互动。
<ng-template #itemTemplate let-item>
<div class="item">
<i class="fa fa-2x fa-code"></i>
<span class="value">{{item.value}}</span>
</div>
</ng-template>无匹配项模板
当没有匹配到任何数据时，可以显示一个自定义的无匹配项模板。
<ng-template #notFoundTemplate>
<div class="not-found-item">
No results found
</div>
</ng-template>总结
在本文中，我们介绍了 ngui-angular2-auto-complete 这个方便实用的 npm 包，以及如何使用它来实现自动补全功能。我们还提供了一些示例代码，以供读者参考。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66e1