The Dropdown component is more powerful with customized content over the default label text of an item. The filter property is used to filter all the possible options through an input in an overlay. A customized example of a Dropdown with the list of options representing a country name and a flag image would be as follows:

<p-dropdown [options]="countries" [(ngModel)]="selectedCountry"  
  [styleClass]="dropdown-width" filter="filter">
  <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-dropdown>

The dropdown will be displayed with the custom content and filtering as shown in the following screenshot:

Instead of scrolling down to see a list of all the countries, there is a filter input option at the top to filter country names by their starting letters. It also supports multiproperty filtering with comma-separated values (for example, filterBy="label, value.name".) By default, filtering is done against the label of the SelectItem API.