Angular 4与Material 2多选下拉框添加搜索筛选功能问询

嘿，这个需求我在做Angular 4项目的时候刚好碰到过，给你梳理下实用的解决方案：

核心结论 #

1. Material 2（对应Angular 4的版本是2.x系列）没有内置的可搜索多选下拉框，得基于现有组件自行开发筛选功能；
2. 确实存在！它就是用来给下拉框添加自定义头部区域的，刚好能用来放搜索输入框，完美适配你的需求。

具体实现步骤 #

你可以借助嵌入搜索框，再结合Angular的数组过滤逻辑来实现选项筛选，下面是一个完整的可运行示例：

模板代码（HTML） #

<mat-select [formControl]="selectedOptions" multiple placeholder="请选择选项">
  <!-- 自定义头部：添加搜索框 -->
  <mat-select-header>
    <mat-form-field class="search-input" style="width: 100%;">
      <input 
        matInput 
        placeholder="搜索选项" 
        [(ngModel)]="searchKeyword" 
        (input)="filterOptions()"
      >
    </mat-form-field>
  </mat-select-header>

  <!-- 渲染过滤后的选项列表 -->
  <mat-option 
    *ngFor="let option of filteredOptions" 
    [value]="option.value"
  >
    {{ option.label }}
  </mat-option>
</mat-select>

组件代码（TypeScript） #

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

@Component({
  selector: 'app-searchable-multi-select',
  templateUrl: './searchable-multi-select.component.html',
  styleUrls: ['./searchable-multi-select.component.css']
})
export class SearchableMultiSelectComponent {
  // 绑定多选的表单控件
  selectedOptions = new FormControl([]);
  // 原始的选项数据源
  originalOptions = [
    { value: 'angular', label: 'Angular' },
    { value: 'material', label: 'Material Design' },
    { value: 'rxjs', label: 'RxJS' },
    { value: 'typescript', label: 'TypeScript' }
  ];
  // 存储过滤后的选项
  filteredOptions = [...this.originalOptions];
  // 搜索关键词双向绑定
  searchKeyword = '';

  // 选项过滤逻辑
  filterOptions() {
    if (!this.searchKeyword.trim()) {
      // 关键词为空时恢复全部选项
      this.filteredOptions = [...this.originalOptions];
      return;
    }
    // 忽略大小写的模糊匹配过滤
    const lowerKeyword = this.searchKeyword.toLowerCase();
    this.filteredOptions = this.originalOptions.filter(option => 
      option.label.toLowerCase().includes(lowerKeyword)
    );
  }
}

额外优化提示 #

• 记得在你的模块中导入MatSelectModule、MatInputModule、ReactiveFormsModule这些必要的Material和表单模块；
• 如果选项数量很多，建议用RxJS的debounceTime做防抖处理，避免频繁触发过滤函数影响性能；
• 可以给搜索框添加清除按钮（比如用mat-icon），提升用户操作体验；
• 可选优化：已选中的选项即使不匹配搜索关键词，也可以固定显示在列表顶部，方便用户取消选择。

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