Mat select dropdown with incremental search

Question

I have a mat select dropdown Data in the dropdown is fetched from API, so its an array of objects. I want this dropdown to be editable and it should provide me with filter autocomplete feature. For example: Array = ['Ram', 'Harry', 'Sameer']. If user types 'R' , it should filter out all options beginning with 'R', so it should filter out 'Ram', (it shouldn't search for 'R' in between words, other words have alphabet 'R' in them, but that shouldn't be filtered out), so as and when user keeps on typing, options should get filtered according to that. Any suggestions on how I can accomplish this?

Answer 1

You could use the ngx-mat-select-search component, which adds a search field to your dropdown. You could also hide the search input by css, if needed. Example:

<mat-select [formControl]="bankCtrl">
    <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
    <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
      {{bank.name}}
    </mat-option>
</mat-select>

You then use the value of bankFilterCtrl to filter the list of options in filteredBanks

Answer 2

Use Mat Autocomplete (adding custom filter)

check the above link

and change filter function of ts

private _filter(value: string): string[] {
 const filterValue = value.toLowerCase();

 return this.options.filter(option => option.toLowerCase().includes(filterValue));
}

to

private _filter(value: string): string[] {
 const filterValue = value.toLowerCase();

 return this.options.filter(option => option.toLowerCase().startsWith(filterValue));
}