import {AutoCompleteModule} from 'primeng/primeng';
AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod gets the query text as event.query property and should update the suggestions with the search results.
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"></p-autoComplete>
export class AutoCompleteDemo {
text: string;
results: string[];
search(event) {
this.mylookupservice.getResults(event.query).then(data => {
this.results = data;
});
}
}
AutoComplete can be used in a model driven form as well.
<p-autoComplete formControlName="city" [suggestions]="results" (completeMethod)="search($event)"></p-autoComplete>
Enabling dropdown property displays a button next to the input field, implementation by default does nothing and you can use the dropdown for cases like displaying all results. onDropdownClick is triggered when the button is clicked.
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
[dropdown]="true" (onDropdownClick)="handleDropdown(event)"></p-autoComplete>
export class AutoCompleteDemo {
text: string;
results: string[];
search(event) {
this.mylookupservice.getResults(event.query).then(data => {
this.results = data;
});
}
handleDropdown(event) {
//event.query = current value in input field
}
}
Multiple mode is used to select more than one value from the autocomplete. In this case, model reference should be an array.
<p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)" [multiple]="true"></p-autoComplete>
export class AutoCompleteDemo {
texts: string[];
results: string[];
search(event) {
this.mylookupservice.getResults(event.query).then(data => {
this.results = data;
});
}
}
AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.
<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name"></p-autoComplete>
export class AutoCompleteDemo {
val: country;
results: country[];
search(event) {
this.countrylookupservice.getResults(event.query).then(data => {
this.results = data;
});
}
}
Templating allows displaying custom content inside the suggestions panel. The local template variable passed to the template is an object in the suggestions array.
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)">
<template let-brand>
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
<img src="showcase/resources/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
<div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
</div>
</template>
</p-autoComplete>
Name | Type | Default | Description |
---|---|---|---|
suggestions | array | null | An array of suggestions to display. |
field | any | null | Field of a suggested object to resolve and display. |
scrollHeight | string | 200px | Maximum height of the suggestions panel. |
dropdown | boolean | false | Displays a button next to the input field when enabled. |
multiple | boolean | false | Specifies if multiple values can be selected. |
minLength | number | 3 | Minimum number of characters to initiate a search. |
delay | number | 300 | Delay between keystrokes to wait before sending a query. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
inputStyle | string | null | Inline style of the input field. |
inputStyleClass | string | null | Inline style of the input field. |
placeholder | string | null | Hint text for the input field. |
readonly | boolean | false | When present, it specifies that the input cannot be typed. |
disabled | boolean | false | When present, it specifies that the component should be disabled. |
maxlength | number | null | Maximum number of character allows in the input field. |
size | number | null | Size of the input field. |
Name | Parameters | Description |
---|---|---|
completeMethod |
event.originalEvent: browser event event.query: Value to search with |
Callback to invoke to search for suggestions. |
onSelect | value: Selected value | Callback to invoke when a suggestion is selected. |
onUnselect | value: Unselected value in multiple mode | Callback to invoke when a selected value is removed. |
onDropdownClick |
event.originalEvent: browser event event.query: Current value of the input field |
Callback to invoke to when dropdown button is clicked. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-autocomplete | Container element |
ui-autocomplete-panel | Overlay panel of suggestions. |
ui-autocomplete-items | List container of suggestions. |
ui-autocomplete-item | List item of a suggestion. |
ui-autocomplete-token | Element of a selected item in multiple mode. |
ui-autocomplete-token-icon | Close icon element of a selected item in multiple mode. |
ui-autocomplete-token-label | Label of a selected item in multiple mode. |
Native component that requires the css of PrimeUI Autocomplete.
<h3 class="first">Basic</h3>
<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
placeholder="Countries" [minLength]="1"></p-autoComplete>
<span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>
<h3>Advanced</h3>
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
[minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick($event)">
<template let-brand>
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
<img src="showcase/resources/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
<div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
</div>
</template>
</p-autoComplete>
<span style="margin-left:50px">Brand: {{brand||'none'}}</span>
<h3>Multiple</h3>
<p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
[minLength]="1" placeholder="Countries" field="name" [multiple]="true">
</p-autoComplete>
<ul>
<li *ngFor="let c of countries">{{c.name}}</li>
</ul>
export class AutoCompleteDemo {
country: any;
countries: any[];
filteredCountriesSingle: any[];
filteredCountriesMultiple: any[];
brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];
filteredBrands: any[];
brand: string;
constructor(private countryService: CountryService) { }
filterCountrySingle(event) {
let query = event.query;
this.countryService.getCountries().then(countries => {
this.filteredCountriesSingle = this.filterCountry(query, countries);
});
}
filterCountryMultiple(event) {
let query = event.query;
this.countryService.getCountries().then(countries => {
this.filteredCountriesMultiple = this.filterCountry(query, countries);
});
}
filterCountry(query, countries: any[]):any[] {
//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[] = [];
for(let i = 0; i < countries.length; i++) {
let country = countries[i];
if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
return filtered;
}
filterBrands(event) {
this.filteredBrands = [];
for(let i = 0; i < this.brands.length; i++) {
let brand = this.brands[i];
if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
this.filteredBrands.push(brand);
}
}
}
handleDropdownClick() {
this.filteredBrands = [];
//mimic remote call
setTimeout(() => {
this.filteredBrands = this.brands;
}, 100)
}
}
@Injectable()
export class CountryService {
constructor(private http: Http) {}
getCountries() {
return this.http.get('showcase/resources/data/countries.json')
.toPromise()
.then(res => <any[]> res.json().data)
.then(data => { return data; });
}
}