In many cases, normal field population is just not enough; it would be more powerful to have customized content for a better experience. AutoComplete provides this feature using ng-template, which displays the custom content inside the suggestions panel. The local template variable passed to ng-template is an object from the suggestions array. The customized example of AutoComplete with the country's name and flag would be as follows:
<p-autoComplete [(ngModel)]="customCountry" name="template"
[suggestions]="filteredCustomCountries"
field="name" (completeMethod)="filterCustomCountries($event)"
[size]="30" [minLength]="1" placeholder="Start your search">
<ng-template let-country pTemplate="item">
<div class="ui-helper-clearfix" class="template-border">
<img src="/assets/data/images/country/
{{country.code.toLowerCase()}}.png" class="country-image"/>
<div class="country-text">{{country.name}}</div>
</div>
</ng-template>
</p-autoComplete>
There is no restriction on what kind of data can be shown. The following screenshot shows a snapshot result of the customized country information:
The item template is used to customize the content inside the suggestions panel where selectedItem is used to customize a selected item in the multiple selection.
The AutoComplete component supports many events as mentioned here:
|
Name
|
Parameters
|
Description
|
| completeMethod |
|
Callback to invoke to search for suggestions. |
| onFocus | event: Browser event | Callback to invoke when AutoComplete gets focus. |
| onBlur | event: Browser event | Callback to invoke when AutoComplete loses focus. |
| onSelect | value: The 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 |
|
Callback to invoke when the dropdown button is clicked. |
| onClear | event: The browser event | Callback to invoke when the input field is cleared. |
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter3/autocomplete.