如何添加清除按钮以过滤多选primeng angular

Question

I am trying to make multiselect with a filter. I need to clear the filter after filtering (not the selecting). I used prime ng multiselect and it does not have property to address this requirement.

below is my code.

<p-multiSelect 
  [options]="subjectTitles" 
  [showToggleAll]="false" 
  [(ngModel)]="selectedTitle 
  [ngModelOptions]="{ standalone: true }" 
  optionLabel="title" 
  defaultLabel="Select title"  
  [filter]="true 
  [itemSize]="30" 
  filterPlaceHolder="Search title" 
  #select="ngModel" 
  required 
  (onPanelHide)="panelClosed = true" 
  class="multiselect-custom-virtual-scroll" >
</p-multiSelect>`

Can I know if anyone has a solution for this?

Answer 1

onPanelShow event of p-multiselect, set the type of multiselect filter input as 'search'.

(onPanelShow)="onMsPanelShow()"

onMsPanelShow()
{
    if(document.getElementsByClassName(
    "p-multiselect-filter p-inputtext p-component"
    )){
        document.getElementsByClassName(
        "p-multiselect-filter p-inputtext p-component"
        ).item(0).setAttribute("type","search");
    }
}

PS It may not work with IE browser.