Question 294879 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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

Tags:

2

Answers


  1. 0

    You need to use AutoComplete functionality to achieve this. https://primeng.org/autocomplete.

    multiselect only allows you to filter through the data you have already set to the dropdown

    Login or Signup to reply.
  2. 0

    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
    })
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search