How to filter in multiple labels with p-listbox?

Question

i want to filter on multiple labels , is there a way that optionLabel can have multiple options ?

<p-listbox [options]="sites" `enter code here`[(ngModel)]="selectedSite" class="ui-fluid" [listStyle]="{'max-height':'300px'}" filter="filter" optionLabel="name">

              <p-header>
                <strong>{{ 'select-site.choose' | translate}}</strong>
              </p-header>
              <ng-template let-site pTemplate="item">
                <span>{{site.value.code}} - {{site.value.name}}</span>
              </ng-template>
</p-listbox>

i want to filter on code and name

Answer 1

Instead of setting options to an array of arbitrary objects, set it to an array of select items, with a label that contains both values you want to filter on.

siteOptions: SelectItem[] = sites.map(s => { value: s, label: s.name + s.code });

Update your listbox element:

<p-listbox [options]="siteOptions" [(ngModel)]="selectedSite" class="ui-fluid" [listStyle]="{'max-height':'300px'}" filter="filter">

You are already using an item template to control how each element in the list is displayed, so no other changes may be necessary.