How to remove p-multiselect filter from options with having search input

Issue

I want my primeng multiselect to have a search/filter input, which I added via <p-multiselect [filter]="'true'" [options]="selectOptions"></p-multiselect>. And when user type value in filter input, I get new data with api, and refresh selectOptions. But p-multiselect is doing filter on my options, and shows options without some items.

Tell me please how can I have that filter input, without dafault filter function?

Now I just refresh that options data, but I dont get the result I wont

Solution

You can do that by adding input filed with formControl inside the pTemplate="header" of the component like so:

In html:

<h5>Basic</h5>
<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCities1"
  defaultLabel="Select a City"
  optionLabel="name"
  [filter]="false"
>
  <ng-template pTemplate="header">
    <div class="flex p-3" [dir]="'ltr'">
      <div class="p-inputgroup" (click)="$event.stopPropagation()">
        <span class="p-inputgroup-addon"><i class="pi pi-search"></i></span>
        <input
          type="text"
          pInputText
          [formControl]="searchFormCountries"
          placeholder="search"
        />
      </div>
    </div>
  </ng-template>
</p-multiSelect>

make sure to disable the default filter by adding [filter]="false"

Now inside your TS:

searchFormCountries:FormControl = new FormControl('');

subscribeToSearchChange(){
    const search$ = this.searchFormCountries.valueChanges.pipe(distinctUntilChanged(),debounceTime(400));
    search$.subscribe(res =>{
      // here call your api and update the list of data
    })
}

Answered By - Mouayad_Al