ng2-awesomplete 是一个 Angular2+ 的自动补全插件，可以快速为传统的输入框添加自动补全功能。本文将详细介绍如何安装和使用该插件，以及如何进行参数设置和样式调整。
安装
使用 npm 安装 ng2-awesomplete。
npm install --save ng2-awesomplete
使用
导入 NgAwesompleteModule 模块。
import { NgAwesompleteModule } from 'ng2-awesomplete';
@NgModule({
imports: [ NgAwesompleteModule ],
// ...
})在需要自动补全的输入框（例如 input 标签）中使用指令 ng2-awesomplete。例如：
<input type="text" ng2-awesomplete [list]="['HTML', 'CSS', 'JavaScript']">
此时，输入框就有了自动补全功能。在输入框中输入字符时，会自动弹出一个下拉框，推荐和匹配的内容会出现在下拉框中。用户可以通过上下方向键和回车键进行选择，或者直接选择一个推荐项。选择后，输入框的值将自动填充为所选择的内容。
参数设置
ng2-awesomplete 提供了多个参数，可以进行各种自定义设置。
list
类型：数组，默认值：[]
表示输入框要自动补全的内容列表。
<input type="text" ng2-awesomplete [list]="['HTML', 'CSS', 'JavaScript']">
可以通过在组件中定义一个数组，或者通过调用一个 API 更新列表。
minChars
类型：数字，默认值：1
表示输入框中输入多少个字符时，才开始自动补全功能。
<input type="text" ng2-awesomplete [minChars]="3">
maxItems
类型：数字，默认值：10
表示下拉框中最多显示多少个推荐项。如果超过了这个数量，则会自动出现滚动条。
<input type="text" ng2-awesomplete [maxItems]="5">
autoFirst
类型：布尔值，默认值：false
表示是否自动选中下拉框中的第一项。
<input type="text" ng2-awesomplete [autoFirst]="true">
样式调整
ng2-awesomplete 默认使用 awesomplete.css 样式文件。使用该文件可以使自动补全框的外观与传统浏览器自带的自动补全框相同。如果需要进行样式调整，请自行编辑该文件。
CSS 样式
下面是一些自定义 ng2-awesomplete 样式的例子。在样式表中添加自己的样式将覆盖默认的样式。
-- -------------------- ---- -------
-- ----------- --
------------ --------------- -
------ ----- -----------
----- ---- -----------
-
-- --------- --
------------ ----------------- -
------------ ------ -----------
----------------- ----------
------- --- ----- -----
----------- -----
------- --
-------- --
----------- ------ -- ---------- --
----------- ----- -- ------------- --
-
-- -------- --
------------ ----------------- -
-------- --- -----
------- --------
-
-- ------- --
------------ ------------------------
------------ -------------------------------------- -
----------------- -----
------ ------
-
-- ------- --
------------ ---------------------- -
------ ----
-示例代码
完整的使用示例代码如下所示。
<input type="text" ng2-awesomplete [list]="['HTML', 'CSS', 'JavaScript']" [minChars]="3" [maxItems]="5" [autoFirst]="true">
总结
ng2-awesomplete 是一个简单易用的自动补全插件，可以简化表单制作过程中的输入操作。通过本文的介绍，你可以学会如何安装和使用该插件，以及如何进行参数设置和样式调整。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ed81e8991b448e0a02