极客教程Angular PrimeNG Form AutoComplete组件
Angular PrimeNG是一个开源的框架，具有丰富的本地Angular UI组件，有助于创建一个具有增强功能的有吸引力的用户界面。这些组件可以用来做很好的风格设计，并用于制作响应式网站，非常容易。不同的组件支持不同的功能，如波纹效果。这是一个由Button组件支持的动画，它是可选的，默认情况下是禁用的，它可以通过注入PrimeNGConfig在主组件中全局启用。该动画主要用于增强各种组件的整体用户体验。
PrimeNG为各种组件、面板、覆盖层、菜单、图表等提供便利，这有助于制作一个单页应用程序，即一个网络应用程序，加载一个单一的HTML页面，每次点击鼠标时，只有页面的一部分而不是整个页面被更新。这提高了整体的用户体验，同时根据所使用的组件，增加了不同的功能来执行特定的任务。
AutoComplete：在这篇文章中，我们将了解一个概述，即表单自动组件，并通过实例了解其实现。
语法:
<p-autoComplete></p-autoComplete>
AutoComplete的变体有：
- Basic：这是基本的AutoComplete组件，你在其中输入一些单词，建议将出现在选项中。
- 下拉式和模板式。在这种类型的变体中，当你输入或点击下拉图标时，会出现选项。
- Grouped。在这种类型的变化中，该选项将出现在组中。
- 虚拟卷轴（10000项）。在这种类型的变体中，你可以通过选项进行滚动。
- Multiple。：在这种类型的变体中，你可以选择多个选项。
属性:
- suggestions。此属性用于定义一个要显示的建议数组。
- field。此属性用于定义要解决和显示的建议对象的字段。
- scrollHeight。该属性用于定义建议面板的最大高度。
- dropdown。此属性用于定义启用时输入字段旁边的显示按钮。
- multiple: 此属性用于指定是否可以选择多个值。
- dropdownIcon: 此属性用于定义下拉图标的图标类别。
- minLength。此属性用于定义启动搜索的最小字符数。
- delay:此属性用于定义在发送查询前要等待的击键间隔的延迟。
- completeOnFocus:该属性用于在输入获得焦点时运行查询。
- style。该属性用于定义组件的内联风格。
- inputStyle。此属性用于定义输入字段的内联风格。
- panelStyle。该属性用于定义叠加面板元素的内联风格。
- styleClass。该属性用于样式组件的类别。
- inputStyleClass。该属性用于定义输入字段的内联风格。
- panelStyleClass。该属性用于样式化叠加面板元素的类别。
- inputId。该属性用于定义焦点输入的标识符，以匹配为该组件定义的标签。
- name: 此属性用于定义输入元素的名称。
- optionGroupLabel。此属性用于定义一个选项组的标签字段的名称。
- group。此属性用于在提供嵌套选项时将选项显示为分组。
- optionGroupChildren。该属性用于定义一个选项组的选项字段的名称。
- placeholder。此属性用于定义输入字段的提示文本。
- readonly:此属性指定输入不能被打字。
- disabled:此属性表示该组件应被禁用。
- maxlength。此属性用于定义输入字段中允许的最大字符数。
- size。此属性用于定义输入字段的大小。
- appendTo:这个属性用于定义附加覆盖的目标元素，有效值是 “body “或另一个元素的本地ng-template变量。
- tabindex。该属性用于定义元素在标签顺序中的索引。
- dataKey。此属性用于定义属性，以唯一地识别选项中的一个值。
- autoHighlight。该属性用于默认突出显示列表中的第一个项目。
- type。此属性用于定义输入的类型，默认为 “文本”。
- showEmptyMessage:此属性用于显示空信息（如果是真的）。
- emptyMessage。此属性用于定义没有数据时要显示的文本。
- immutable。这个属性用来定义建议应该如何被操作。
- required。此属性用于指定在提交表单前必须填写一个输入字段。
- autofocus。该属性用于定义组件在加载时应自动获得聚焦的规格。
- forceSelection。当这个属性出现时，如果手动输入的内容与建议不匹配，AutoComplete就会清除，强制只接受建议中的值。
- dropdownMode。该属性用于指定下拉按钮的行为。
- baseZIndex。此属性用于定义分层时使用的基础ZIndex值。
- autoZIndex。该属性用于自动定义管理分层。
- showTransitionOptions。此属性用于定义显示动画的过渡选项。
- hideTransitionOptions。该属性用于定义隐藏动画的过渡选项。
- ariaLabel。此属性用于定义标记输入的字符串，以实现无障碍性。
- ariaLabelledBy。该属性用于在DOM中定义一个或多个ID，为输入字段贴上标签。
- dropdownAriaLabel。此属性用于定义标记下拉按钮的字符串，以实现无障碍性。
- unique。该属性用于定义多个模式上所选项目的唯一性。
- autocomplete:此属性用于定义AutoComplete当前元素的属性的字符串。
- showClear: 当这个属性被启用时，就会显示一个清除图标来清除数值。
- virtualScroll。在这个属性中，数据应该在滚动期间按需加载。
- virtualScrollItemSize:该属性用于定义虚拟滚动列表中项目的高度。
- virtualScrollOptions。这个属性用于使用滚动器的功能。
- lazy：该属性用于定义是否以懒惰的方式加载数据并进行交互。
Events Used:
- completeMethod。该模板用于调用以搜索建议。
- onFocus。这个模板用于在AutoComplete程序获得焦点时调用。
- onBlur: 这个模板用于在AutoComplete功能失去焦点时调用。
- onKeyUp。该模板用于在用户释放钥匙时调用。
- onSelect。该模板用于在一个建议被选中时调用。
- onUnselect。该模板用于在删除一个选定的值时调用。
- onDropdownClick。该模板用于在点击下拉按钮时调用。
- onClear：该模板用于在输入字段被清除时调用。
- onShow。该模板用于在AutoComplete覆盖层可见时调用。
- onHide。这个模板用于在AutoComplete的覆盖物被隐藏时调用。
- onLazyLoad：该模板用于调用懒人模式来加载新数据。
Templates Used:
- item。该模板用于定义选项的数据和索引。
- group。该模板用于定义选项的组别。
- selectedItem: 这个模板用于定义选项的选择。
- header。该模板用于定义页眉。
- footer。该模板用于定义页脚。
- loader。该模板用于定义加载器。
创建Angular PrimeNG应用程序的步骤：
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：在创建你的项目文件夹即appname之后，通过使用以下命令，移动到当前工作目录，在那里刚刚创建了新的应用程序。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：安装成功后，它将看起来像以下图片。
实例1：在下面的代码中，我们将看到表单AutoComplete组件是如何工作的。
app.component.html
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<style>
body {
background-color: lightgrey;
text-align: center;
}
p-autoComplete {
border: 16px solid green;
}
</style>
</head>
<body>
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h2>Form AutoComplete</h2>
<h5>Basic</h5>
<p-autoComplete [(ngModel)]="selectedCountry"
[suggestions]="filteredCountries"
(completeMethod)="filterCountry($event)"
field="name" [minLength]="1">
</p-autoComplete>
</div>
</body>
</html>
app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { SelectItem } from 'primeng/api';
import { SelectItemGroup } from 'primeng/api';
import { FilterService } from 'primeng/api';
import { CountryService } from './countryservice';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [CountryService, FilterService],
})
export class AppComponent {
selectedCountry: any;
countries: any[];
filteredCountries: any[];
selectedCountries: any[];
selectedCountryAdvanced: any[];
filteredBrands: any[];
groupedCities: SelectItemGroup[];
filteredGroups: any[];
constructor(
private countryService: CountryService,
private filterService: FilterService
) { }
ngOnInit() {
this.countryService.getCountries().then((countries) => {
this.countries = countries;
});
this.groupedCities = [
{
label: 'India',
value: 'IND',
items: [
{ label: 'Mumbai', value: 'Berlin' },
{ label: 'Goa', value: 'Frankfurt' },
{ label: 'Varanasi', value: 'Hamburg' },
{ label: 'Dadar', value: 'Munich' },
],
},
];
}
filterCountry(event) {
let filtered: any[] = [];
let query = event.query;
for (let i = 0; i < this.countries.length; i++) {
let country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
this.filteredCountries = filtered;
}
filterGroupedCity(event) {
let query = event.query;
let filteredGroups = [];
for (let optgroup of this.groupedCities) {
let filteredSubOptions = this.filterService.filter(
optgroup.items,
['label'],
query,
'contains'
);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push({
label: optgroup.label,
value: optgroup.value,
items: filteredSubOptions,
});
}
}
this.filteredGroups = filteredGroups;
}
}
countryservice.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class CountryService {
constructor(private http: HttpClient) { }
getCountries() {
return this.http
.get < any > ('assets/countries.json')
.toPromise()
.then((res) => <any[] > res.data)
.then((data) => {
return data;
});
}
}
countries.json
{
"data": [
{"name": "Hungary", "code": "HU"},
{"name": "Iceland", "code": "IS"},
{"name": "India", "code": "IN"},
{"name": "Indonesia", "code": "ID"},
{"name": "Iran, Islamic Republic Of", "code": "IR"},
{"name": "Iraq", "code": "IQ"},
{"name": "Ireland", "code": "IE"},
{"name": "Isle of Man", "code": "IM"},
{"name": "Israel", "code": "IL"},
{"name": "Italy", "code": "IT"},
{"name": "Jamaica", "code": "JM"},
{"name": "Japan", "code": "JP"},
]
}
输出:
示例2：在下面的代码中，我们将利用上述语法来演示表单AutoComplete组件的使用。
app.component.html
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<style>
body {
background-color: lightgrey;
text-align: center;
width: 550px;
height: 550px
}
p-autoComplete {
border: 16px solid green;
}
</style>
</head>
<body>
<div style="text-align:center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>Angular PrimeNG Form AutoComplete Component</h4>
<h5>Dropdown</h5>
<p-autoComplete [(ngModel)]="selectedCountryAdvanced"
[suggestions]="filteredCountries"
(completeMethod)="filterCountry($event)"
field="name" [dropdown]="true">
<ng-template let-country pTemplate="item">
<div class="country-item">
<div>{{ country.name }}</div>
</div>
</ng-template>
</p-autoComplete>
</div>
</body>
</html>
app.component.ts
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
import { SelectItem } from "primeng/api";
import { SelectItemGroup } from "primeng/api";
import { FilterService } from "primeng/api";
import { CountryService } from "./countryservice";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [CountryService, FilterService]
})
export class AppComponent {
selectedCountry: any;
countries: any[];
filteredCountries: any[];
selectedCountries: any[];
selectedCountryAdvanced: any[];
filteredBrands: any[];
groupedCities: SelectItemGroup[];
filteredGroups: any[];
constructor(
private countryService: CountryService,
private filterService: FilterService
) { }
ngOnInit() {
this.countryService.getCountries().then(countries => {
this.countries = countries;
});
this.groupedCities = [
{
label: "India",
value: "IND",
items: [
{ label: "Mumbai", value: "Berlin" },
{ label: "Goa", value: "Frankfurt" },
{ label: "Varanasi", value: "Hamburg" },
{ label: "Dadar", value: "Munich" }
]
},
];
}
filterCountry(event) {
let filtered: any[] = [];
let query = event.query;
for (let i = 0; i < this.countries.length; i++) {
let country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
this.filteredCountries = filtered;
}
filterGroupedCity(event) {
let query = event.query;
let filteredGroups = [];
for (let optgroup of this.groupedCities) {
let filteredSubOptions = this.filterService.filter(
optgroup.items,
["label"],
query,
"contains"
);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push({
label: optgroup.label,
value: optgroup.value,
items: filteredSubOptions
});
}
}
this.filteredGroups = filteredGroups;
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AutoCompleteModule,
FormsModule,
HttpClientModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
countryservice.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class CountryService {
constructor(private http: HttpClient) { }
getCountries() {
return this.http
.get < any > ('assets/countries.json')
.toPromise()
.then((res) => <any[] > res.data)
.then((data) => {
return data;
});
}
}
countries.json
{
"data": [
{ "name": "Iceland", "code": "IS" },
{ "name": "India", "code": "IN" },
{ "name": "Indonesia", "code": "ID" },
{ "name": "Iran, Islamic Republic Of", "code": "IR" },
{ "name": "Iraq", "code": "IQ" },
{ "name": "Ireland", "code": "IE" },
{ "name": "Isle of Man", "code": "IM" },
{ "name": "Israel", "code": "IL" },
{ "name": "Italy", "code": "IT" }
]
}
输出:
