Advanced features - the customized content displays

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:

completeMethod

• event.originalEvent: The browser event
• event.query: Value to search with

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

• event.originalEvent: The browser event
• event.query: The current value of the input field

Callback to invoke when the dropdown button is clicked. onClear event: The browser event Callback to invoke when the input field is cleared.