CODEWITHSUNDEEP
angulardropdownmulti-select
Kibria
Kibria

Reputation: 141

Filter with ng-multiselect-dropdown and show only those options which starts with the entered characters

I'm using ng-multiselect-dropdown with the following settings:

this.countryDropdownSettings = {
      singleSelection: true,
      idField: 'level0_id',
      textField: 'country',
      selectAllText: 'Worldwide',
      unSelectAllText: 'Worldwide',
      itemsShowLimit: 3,
      allowSearchFilter: true,
      closeDropDownOnSelection: true
    };

When searched, all options are showing which contains the entered character. I want to only suggest those, which starts with the entered characters only. Eg, if I type "I", only India, Italy should appear but Australia will not appear here.

I have searched for the available options, but didn't find any suitable settings.

Upvotes: 0

Views: 2391

Answers (1)

Eliseo
Eliseo

Reputation: 57939

ng-multiselect-dropdown use a pipe to get the filtered result, so it's not easy but you can has two arrays, data and dataFiltered and use the event onFilterChange

<ng-multiselect-dropdown #multiSelect
      <!--see that you use "dataFiltered"
      [data]="dataFiltered" 
      ...
      (onFilterChange)="onFilterChange($event)"
</ng-multiselect-dropdown>

And you has, e.g.

  public data = [..your array of object...];
  public dataFiltered=this.data;

  public onFilterChange(item: any) {
    if(!item)
       this.dataFiltered=this.data;
    else
    {
       item=item.toLowerCase();
       this.dataFiltered=this.data.filter(x=>x.countryName.toLowerCase()
          .indexOf(item)==0)
    }
  }

Well, I write countryName, you need put the property you want to filter

Yes is a bit bizarro, but it's the only I can imagine :(

Upvotes: 1

Related Questions