From 0ffccdca2a60bd4d3b76e89dd224bdef9e292a9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= Date: Mon, 18 Jan 2021 10:37:46 +0300 Subject: [PATCH] #9772 doc update for AutoComplete --- .../autocomplete/autocompletedemo.html | 106 ++++++++++++++++-- .../autocomplete/autocompletedemo.ts | 60 +++++++++- 2 files changed, 154 insertions(+), 12 deletions(-) diff --git a/src/app/showcase/components/autocomplete/autocompletedemo.html b/src/app/showcase/components/autocomplete/autocompletedemo.html index 1a4c0c1877f..7b3916edb29 100755 --- a/src/app/showcase/components/autocomplete/autocompletedemo.html +++ b/src/app/showcase/components/autocomplete/autocompletedemo.html @@ -26,6 +26,16 @@
Multiple
+ +
Grouped
+ + +
+ + {{group.label}} +
+ + @@ -171,7 +181,8 @@
Templating

In multiple mode, selected item can be customized using selectedItem ng-template. Note that this - template is not supported in single mode.

+ template is not supported in single mode. In addition when grouping is enabled, group template is available + to customize the option groups. All templates get the option instance as the default local template variable.

<p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)" [multiple]="true"> @@ -303,6 +314,24 @@
Properties
null Name of the input element. + + optionGroupLabel + string + label + Name of the label field of an option group. + + + group + boolean + false + Whether to display options as grouped when nested options are provided. + + + optionGroupChildren + string + items + Name of the options field of an option group. + placeholder string @@ -606,36 +635,79 @@
Dependencies
<p-autoComplete [(ngModel)]="selectedCountries" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [multiple]="true"> </p-autoComplete> </span> +<h5>Grouped</h5> +<p-autoComplete [group]="true" [suggestions]="filteredGroups" (completeMethod)="filterGroupedCity($event)" field="label" [multiple]="true" [dropdown]="true"> + <ng-template let-group pTemplate="group"> + <div class="p-d-flex p-ai-center"> + <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'p-mr-2 flag flag-' + group.value" style="width: 20px"/> + <span>{{group.label}}</span> + </div> + </ng-template> +</p-autoComplete> export class AutoCompleteDemo { selectedCountry: any; - + countries: any[]; filteredCountries: any[]; selectedCountries: any[]; - + selectedCountryAdvanced: any[]; - + filteredBrands: any[]; + + groupedCities: SelectItemGroup[]; - constructor(private countryService: CountryService) { } + filteredGroups: any[]; + constructor(private countryService: CountryService, private filterService: FilterService) { } + ngOnInit() { - this.countryService.getCountries().then(countries => { + this.countryService.getCountries().then(countries => { this.countries = countries; }); - } + this.groupedCities = [ + { + label: 'Germany', value: 'de', + items: [ + {label: 'Berlin', value: 'Berlin'}, + {label: 'Frankfurt', value: 'Frankfurt'}, + {label: 'Hamburg', value: 'Hamburg'}, + {label: 'Munich', value: 'Munich'} + ] + }, + { + label: 'USA', value: 'us', + items: [ + {label: 'Chicago', value: 'Chicago'}, + {label: 'Los Angeles', value: 'Los Angeles'}, + {label: 'New York', value: 'New York'}, + {label: 'San Francisco', value: 'San Francisco'} + ] + }, + { + label: 'Japan', value: 'jp', + items: [ + {label: 'Kyoto', value: 'Kyoto'}, + {label: 'Osaka', value: 'Osaka'}, + {label: 'Tokyo', value: 'Tokyo'}, + {label: 'Yokohama', value: 'Yokohama'} + ] + } + ]; + } + filterCountry(event) { //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side let filtered : any[] = []; let query = event.query; - for(let i = 0; i < this.countries.length; i++) { + 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); @@ -644,6 +716,24 @@
Dependencies
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; + } } diff --git a/src/app/showcase/components/autocomplete/autocompletedemo.ts b/src/app/showcase/components/autocomplete/autocompletedemo.ts index 83aa23a75d2..ff6c822a7e4 100755 --- a/src/app/showcase/components/autocomplete/autocompletedemo.ts +++ b/src/app/showcase/components/autocomplete/autocompletedemo.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {CountryService} from '../../service/countryservice'; - +import { Component } from '@angular/core'; +import { FilterService, SelectItemGroup } from 'primeng/api'; +import { CountryService } from '../../service/countryservice'; @Component({ templateUrl: './autocompletedemo.html' }) @@ -18,12 +18,46 @@ export class AutoCompleteDemo { filteredBrands: any[]; - constructor(private countryService: CountryService) { } + groupedCities: SelectItemGroup[]; + + filteredGroups: any[]; + + constructor(private countryService: CountryService, private filterService: FilterService) { } ngOnInit() { this.countryService.getCountries().then(countries => { this.countries = countries; }); + + this.groupedCities = [ + { + label: 'Germany', value: 'de', + items: [ + {label: 'Berlin', value: 'Berlin'}, + {label: 'Frankfurt', value: 'Frankfurt'}, + {label: 'Hamburg', value: 'Hamburg'}, + {label: 'Munich', value: 'Munich'} + ] + }, + { + label: 'USA', value: 'us', + items: [ + {label: 'Chicago', value: 'Chicago'}, + {label: 'Los Angeles', value: 'Los Angeles'}, + {label: 'New York', value: 'New York'}, + {label: 'San Francisco', value: 'San Francisco'} + ] + }, + { + label: 'Japan', value: 'jp', + items: [ + {label: 'Kyoto', value: 'Kyoto'}, + {label: 'Osaka', value: 'Osaka'}, + {label: 'Tokyo', value: 'Tokyo'}, + {label: 'Yokohama', value: 'Yokohama'} + ] + } + ]; } filterCountry(event) { @@ -39,4 +73,22 @@ export class AutoCompleteDemo { 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; + } } \ No newline at end of file