如何在Mat-Select中实现搜索功能

<mat-form-field>
  <mat-select placeholder="选择项" [(ngModel)]="selectedItem" (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let item of items" [value]="item">{{ item }}</mat-option>
  </mat-select>
</mat-form-field>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  items: string[] = ['选项1', '选项2', '选项3', '选项4'];
  selectedItem: string;

  onSelectionChange(event) {
    console.log(this.selectedItem);
  }
}

<mat-form-field>
  <input matInput placeholder="搜索" [(ngModel)]="searchText">
</mat-form-field>

<mat-form-field>
  <mat-select placeholder="选择项" [(ngModel)]="selectedItem" (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let item of items | filter: searchText" [value]="item">{{ item }}</mat-option>
  </mat-select>
</mat-form-field>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: string[], searchText: string): string[] {
    if (!searchText) {
      return items;
    }

    searchText = searchText.toLowerCase();

    return items.filter(item => item.toLowerCase().includes(searchText));
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';
import { FilterPipe } from './filter.pipe';

@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }