Angular mat-select如何实现连续输入多字符时跳转匹配对应option

1. 修改模板代码 #

给mat-select绑定keydown事件，同时添加模板引用方便获取组件实例：

<h4>mat-select</h4>
<mat-form-field appearance="fill">
  <mat-label>State</mat-label>
  <mat-select #stateSelect (keydown)="handleKeydown($event)">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
  </mat-select>
</mat-form-field>

2. 修改TS代码 #

新增输入缓存逻辑、前缀匹配逻辑，替换原生的单字符导航：
首先导入需要的依赖：

import {Component, ViewChild, QueryList, ViewChildren} from '@angular/core';
import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';

然后修改组件类：

@Component({
  selector: 'select-reset-example',
  templateUrl: 'select-reset-example.html',
})
export class SelectResetExample {
  @ViewChild('stateSelect') stateSelect: MatSelect;
  @ViewChildren(MatOption) options: QueryList<MatOption>;
  
  // 搜索缓存字符串
  private searchString = '';
  // 搜索超时ID，超过500ms无输入则清空缓存
  private searchTimeout: any = null;
  // 输入间隔阈值，可自行调整
  private readonly SEARCH_DELAY = 500;

  states: string[] = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
    'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
    'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
    'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
    'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
    'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];

  handleKeydown(event: KeyboardEvent) {
    // 跳过特殊按键，保留原生导航功能
    const specialKeys = ['ArrowUp', 'ArrowDown', 'Enter', 'Escape', 'Tab', 'Shift', 'Control', 'Alt', 'Meta'];
    if (specialKeys.includes(event.key)) {
      return;
    }

    // 阻止原生单字符匹配逻辑
    event.preventDefault();
    event.stopPropagation();

    // 拼接搜索字符串，统一转小写实现不区分大小写匹配
    this.searchString += event.key.toLowerCase();

    // 清空之前的超时
    if (this.searchTimeout) {
      clearTimeout(this.searchTimeout);
    }
    // 设定新的超时，超时后清空搜索缓存
    this.searchTimeout = setTimeout(() => {
      this.searchString = '';
    }, this.SEARCH_DELAY);

    // 匹配第一个前缀符合的选项
    const matchedOption = this.options.find(option => {
      const viewValue = option.viewValue.toLowerCase();
      return viewValue.startsWith(this.searchString);
    });

    // 匹配到则高亮该选项
    if (matchedOption) {
      this.stateSelect._keyManager.setActiveItem(matchedOption);
      // 如果需要自动选中可以取消下面这行的注释
      // this.stateSelect.value = matchedOption.value;
    }
  }
}

实现逻辑说明 #

• 拦截mat-select的键盘输入事件，跳过方向键、回车等特殊按键保留原生操作体验，阻止可打印字符的默认行为覆盖原生单字符匹配逻辑
• 维护搜索缓存字符串，用户连续输入的字符会自动拼接，超过设定的间隔阈值（默认500ms）无输入自动清空缓存
• 每次输入后从option列表中匹配首个前缀符合的选项，调用mat-select内部的keyManager设置高亮即可
• 可根据业务需求调整SEARCH_DELAY的数值，或者开启自动选中的逻辑

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