primeng p-multiselect dropdown filter search not showing no result found primeNG v-16.7.1

Question

I have added the primng p-multiselect and in that i have the filter in which i have search when the result is not found than the message not appearingenter image description here i am talking about this but in my case i am not getting any message

<p-multiSelect
        [options]="customerList"
        styleClass="multiSelectDropdown"
        containerStyleClass=""
        formControlName="customer"
        optionLabel="name"
        [filter]="true"
        filterPlaceHolder="Search..."
        placeholder="Select "
        (onFilter)="onFilter($event)"                   
                          >
getCustomerList(): void {
    const requestBody = {
      skip: 0,
      limit: 0,
    }
    this.customerService.getCustomerList(requestBody).subscribe({
      next: (response: any) => {
        this.customerList = response.customerList.map((item: any) => {
          return {
            name: item.name,
            id: item.id,
            email: item.email,
          }
        })
        this.filteredCustomerList = [...this.customerList]
      }
    })
  }

i have done using the ng template to filter the result and showing the display error message like
<ng-template pTemplate="empty">
                              <div *ngIf="filteredCustomerList.length === 0" class="empty-filter">
                                No results found
                              </div>
                            </ng-template>
onFilter(event:any){
    if (event){
      this.filteredCustomerList = this.customerList.filter(customer =>
        customer.name.toLowerCase().includes(event.filter.toLowerCase())
      );
    }
  }

Answer 1

Your onFilter method is not calling as there is no event to trigger when inputting.

Thus, the filteredCustomerList will remain the value same as you are initialized in ngOnInit().

Also, the default filtering rule will be based on the property that you set for the optionLabel. Thus, you don't need the additional function to perform filtering.

Thus remove the *ngIf="filteredCustomerList.length === 0" will solve the issue.

<ng-template pTemplate="empty">
    <div class="empty-filter">
        No results found
    </div>
</ng-template>

So if you are keen to perform custom filtering, you need to add the (onFilter) event:

<p-multiSelect
        [options]="customerList"
        styleClass="multiSelectDropdown"
        containerStyleClass=""
        formControlName="customer"
        optionLabel="name"
        [filter]="true"
        filterPlaceHolder="Search..."
        placeholder="Select "                   
        (onFilter)="onFilter($event)">
   ...
</p-multiSelect>

Demo @ StackBlitz