Primeng p-multiSelect search function is not working

Question

I'm working with PrimeNg to filter columns on my p-table.

I have p-multiSelect nested inside a p-ColumnFilter.

The filtering is working as expected, however the search function inside the p-multiSelect is always returning no results found.

Here is my template code:

<th class="table-header-primary" [ngStyle]="{'width':'200px'}" [pSortableColumn]="'docCategory'">Type
  <p-columnFilter  class="p-ml-auto" type="text" field="doctypeLabel"  matchMode="in" display="menu"  [showApplyButton]="false" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
      <p-multiSelect  [(ngModel)]="doctypeLabel" [options]="_doctypeLabelList"  placeholder="Select" (onChange)="filter($event.value)">
      </p-multiSelect>
      </ng-template>
  </p-columnFilter></th>

Here is my relevant typescript file:

_doctypeLabelList:any[]=[];
doctypeLabel:any="";
  constructor() {
  }

I've attached two photos that I hope make my issue clear.

My multiselect dropdown, populated with appropriate fields from _doctypeLabelList:

Once I try to search for matching values in dropdown:

I have tried to one way bind doctypeLabel but that did not work. The _doctypeLabelList is showing fine in the options dropdown, it's just when searching in the input bar always results in immediate no results found. I'm really at a lost of what else to try. I've looked at the PrimeNg documentation over and over and didn't find any results. The example in the documentation was a rather simple use case, so I'm wondering if somehow the p-columnFilter is affecting my p-multiSelect.

Answer 1

I know the original poster already said they got it working, but when trying to find the answer myself, there was no good explanation given. So I want to clear up what I did.

printersForFilter: any[] = [];

Original line:

<p-multiSelect [ngModel]="value" [options]="jobTypesForFilter" placeholder="Any" (onChange)="filter($event?.value)">

Working line:

<p-multiSelect [ngModel]="value" [options]="jobTypesForFilter" placeholder="Any" (onChange)="filter($event?.value)" [optionValue]="'value'" [optionLabel]="'id'">

Original line:

this.printersForFilter = Object.values([...new Set(sourceData.map((x) => x.printerDescription ?? ''))]);

Working line:

this.printersForFilter = Object.values([...new Set(sourceData.map((x) => x.printerDescription ?? ''))]).map(x => ({ id: x, value: x}));

PrimeNg seems unable to just use the same property as both a value and an id.

Came to my answer by reading this thread, and these two links: https://github.com/primefaces/primeng/issues/10122 https://github.com/primefaces/primeng/issues/9584

Seems to be common and their documentation does not indicate this as all.

Answer 2

Had the same annoying problem, initially I used a string[] as input for options which gave me the same issue.

Fixed it by converting the string array to a SelectItem[] array and use that as [options] input.

public items: string[]; // <-- OLD INPUT 

// NEW INPUT: return items as SelectItem
get itemsAsSelectItems(): SelectItem [] {
  return this.items.map((item) => ({ label: item, value: item } as SelectItem));
}

Template implementation:

<p-multiSelect [options]="itemsAsSelectItems" ... ></p-multiSelect>

Answer 3

In order to use search function in p-multiselect you need to set [optionValue] property. PrimeNG use it to differentiate options.

 <p-multiSelect  
   [(ngModel)]="doctypeLabel" 
   [options]="_doctypeLabelList"  
   placeholder="Select"
   [filter]="true" 
   optionValue="id" 
   (onChange)="filter($event.value)">
 </p-multiSelect>