在这篇博文中，我们将通过一个例子来学习在Angular中实现Primeng的自动完成功能。
Angular自动完成组件
自动完成是一个用户界面功能，它包含一个输入文本框，允许开发人员输入文本，应用程序搜索并显示输入字符的匹配结果，并给出完整的单词预测列表。
这有助于用户进行搜索和选择，而不是在文本框中输入。
这是每个UI框架提供的基本UI元素。
Primeng提供的是一个angular组件。
首先，使用Angular CLI创建一个Angular应用程序。
你可以查看我之前关于Angular应用程序从头开始生成的文章，以及关于Primeng集成Angular的例子。
这篇文章没有谈及Angular应用程序的结构和Primeng集成。
请在下面找到Primeng的其他教程。
这篇文章的代码适用于Angular 10/11/12/13版本。
对于Primeng框架来说，最新的Angular版本是最好的。
导入AutoCompleteModule模块
Primeng通过AutoCompleteModule ，提供自动完成功能。所以，你必须在你的应用程序模块中导入这个模块。app.module.ts文件。导入自动完成模块并配置NgModule配置的Imports部分
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AutoCompleteModule} from 'primeng/autocomplete';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AutoCompleteModule, // autocomplete support
],
providers: [],
bootstrap: [AppComponent],
schemas:
[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
在应用组件中，需要提供数据以及方法或函数来检查输入的关键字
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
numbers: string[] = ['onne','two','three','four','five','six','seven','eight','nine','ten'];
output: string[];
constructor(){
}
search(event) {
console.log('event',event);
this.output = this.numbers.filter(c => c.startsWith(event.query));
}
}
模板HTML变化 - app.component.html
在模板的HTML变化中：
- 使用ngModel属性配置了双向绑定
- 还添加了建议属性，用于为输入的查询提供建议列表。
- 当用户输入一个键时，完整的方法将被触发
- 它有一个事件参数。查询参数包含键入的关键字。
- 该方法返回匹配的查询内容列表，并更新建议绑定。
<div style="text-align:center">
<h1>
Primeng Angular AutoComplete Demo
</h1>
</div>
<div style="text-align:center">
<p-autoComplete [(ngModel)]="selectNumber" [suggestions]="output" (completeMethod)="search($event)"
placeholder="Search" [dropdown]="true" ></p-autoComplete>
</div>
输出
如何在自动完成组件中添加下拉菜单？
默认情况下，这被设置为false。如果下拉菜单变为 "true"，它会在文本框旁边显示一个按钮。
你可以检查配置下拉属性的输出
如何在自动完成中选择多个元素？
可以通过设置多个属性为真来选择多个值。双向绑定属性也应该是一个字符串数组而不是一个单一的字符串。
即selectNumber: string[]; 而不是selectNumber: string。
<p-autoComplete [(ngModel)]="selectNumber" [suggestions]="output" (completeMethod)="search($event)"
placeholder="Search" [dropdown]="true" [multiple]="true" ></p-autoComplete>
请看上面的输出
如何绑定一个对象和ng-template的例子
我们在上面的例子中看到，简单的字符串可以被填充。
我们也可以使用字段属性来填充对象绑定。
在这个对象中，我们有id、name和department字段。
该对象与名字字段相匹配，并输入了单词。
字段定义了需要显示的对象的标签。
ng-template标签允许该组件显示自定义内容。在这个例子中，显示名字和部门作为自定义模板
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
employee:any;
employees = [
{"id": 1, "name": "kiran", "department": "Account"},
{"id": 2, "name": "john", "department": "Sales"},
{"id": 3, "name": "frank", "department": "Hr"},
];
employeesResult: Array = [];
constructor(){
}
searchEmps(event): void {
this.employeesResult = this.employees.filter(c => c.name.startsWith(event.query));
}
}
app.component.html
<div style="text-align:center">
<h1>
Primeng Angular AutoComplete Object Demo
</h1>
</div>
<div style="text-align:center">
<p-autoComplete [(ngModel)]="employee" [suggestions]="employeesResult" (completeMethod)="searchEmps($event)" field="name">
<ng-template let-employee pTemplate="item">
{{employee.name}} {{employee.department}}
</ng-template>
<ng-template let-employee pTemplate="selectedItem">
{{employee.name}} {{employee.department}}
</ng-template>
</p-autoComplete>
</div>
你可以查看输出结果
总结
你学会了自动完成组件在Angular组件中的集成，并学会了一些功能。
