如何在Angular的mat-select下拉菜单中实现搜索功能？

要给mat-select添加搜索功能，你可以通过在下拉面板内嵌入搜索输入框，配合选项过滤逻辑来实现，具体步骤如下：

1. 组件逻辑准备 #

在组件.ts文件中，定义选项数组、搜索控制项以及过滤后的选项数组，同时实现实时过滤方法：

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

@Component({
  selector: 'app-select-search',
  templateUrl: './select-search.component.html',
})
export class SelectSearchComponent {
  selected: string | undefined;
  // 定义选项数据源
  options = [
    { value: 'none', viewValue: 'None' },
    { value: 'option1', viewValue: 'Option 1' },
    { value: 'option2', viewValue: 'Option 2' },
    { value: 'option3', viewValue: 'Option 3' }
  ];
  searchControl = new FormControl('');
  filteredOptions!: Observable<{value: string, viewValue: string}[]>;

  ngOnInit() {
    // 监听搜索输入，实时过滤选项
    this.filteredOptions = this.searchControl.valueChanges.pipe(
      startWith(''),
      map(term => this.filterOptions(term))
    );
  }

  private filterOptions(term: string): {value: string, viewValue: string}[] {
    const filterTerm = term.toLowerCase();
    return this.options.filter(option => 
      option.viewValue.toLowerCase().includes(filterTerm)
    );
  }
}

2. 模板修改 #

在模板中嵌入搜索输入框，并绑定过滤后的选项列表：

<mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <!-- 承载搜索框的空选项 -->
    <mat-option>
      <input matInput placeholder="Search" [formControl]="searchControl">
    </mat-option>
    <!-- 渲染过滤后的选项 -->
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

3. 样式优化（可选） #

添加样式让搜索框在下拉面板中显示更协调：

.mat-select-panel mat-option:first-child .mat-option-text {
  padding: 0;
}
.mat-select-panel mat-option:first-child input {
  width: 100%;
  margin: 8px 16px;
}

核心说明 #

• 用FormControl监听搜索输入变化，结合RxJS操作符实现实时过滤
• 将原硬编码选项改为数组结构，便于过滤逻辑处理
• 第一个mat-option仅用于放置搜索框，不设置value，避免被误选中

内容的提问来源于stack exchange，提问作者Rinky Sharma