如何在角度材料的多选下拉菜单中实现搜索功能

<mat-form-field>
  <mat-label>选择选项</mat-label>
  <input type="text" matInput [formControl]="optionCtrl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectOption($event)">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
      <button mat-icon-button matAutocompleteOrigin (click)="removeOption(option)">
        <mat-icon>close</mat-icon>
      </button>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  optionCtrl = new FormControl();
  options: string[] = ['选项1', '选项2', '选项3', '选项4', '选项5'];
  selectedOptions: string[] = [];

  filteredOptions: Observable<string[]>;

  constructor() {
    this.filteredOptions = this.optionCtrl.valueChanges.pipe(
      startWith(''),
      map(value => this.filterOptions(value))
    );
  }

  filterOptions(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }

  selectOption(event: any): void {
    const option = event.option.viewValue;
    if (!this.selectedOptions.includes(option)) {
      this.selectedOptions.push(option);
    }
    this.optionCtrl.setValue('');
  }

  removeOption(option: string): void {
    const index = this.selectedOptions.indexOf(option);
    if (index >= 0) {
      this.selectedOptions.splice(index, 1);
    }
  }
}