How do i implement autocomplete in a component?

Question

I would like to combine the autocomplete feature with a multiselect mat-select chooser because the optionslist will be quite long.

I\'ve already searched on stackove

Answer 1

One way is to add a manual filter inside mat-select so it will have auto-complete functionality. Find the example code of below given solution here

add a input controller for filter text

    public filterControl = new FormControl();

add the filter text field inside mat-select

     
        
        
            {{option.name | translate}}
        
    

now add a event listener for filter text field value change

     this.filteredOptions = this.filterControl.valueChanges.pipe(
            startWith(''),
            map((value: string) => {
                this.optionItems
                    .forEach(option => {
                        option.show = option.name.toLocaleLowerCase().includes(value.toLowerCase());
                    });
                return this.optionItems;
            })
        );

also to make the whole list to be view in next dropdown open clear the filter text field on panel close, as mentioned in the template code (closed)="onPanelClose()"

 onPanelClose() {
    this.filterControl.setValue('');
}

Demo