如何实现mat-autocomplete的autoSelectActiveOption属性

适用场景 #

解决输入框输入文本后未手动点击下拉选项时，组件拿不到选中值的问题：只要输入内容是下拉列表内的有效匹配项，无需手动点选，组件会自动选中对应选项，不需要额外自定义input change监听逻辑。

实现步骤 #

• 版本校验：该属性为Angular Material 14及以上版本内置能力，低版本不支持，先执行命令确认本地依赖版本：

  ng version @angular/material
  

• 模板配置：直接在<mat-autocomplete>标签上绑定autoSelectActiveOption属性，传入true即可开启功能，示例代码如下：

  <mat-form-field>
    <input 
      type="text" 
      matInput 
      [formControl]="searchControl" 
      [matAutocomplete]="searchAuto"
    >
    <mat-autocomplete
      #searchAuto="matAutocomplete"
      [autoSelectActiveOption]="true"
      (optionSelected)="handleSelect($event)"
    >
      <mat-option 
        *ngFor="let item of filterOptions | async" 
        [value]="item.value"
      >
        {{item.label}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  

生效规则说明 #

• 触发时机：输入框失焦、用户按下回车键时触发校验
• 匹配逻辑：当前输入文本与下拉列表中高亮的激活选项完全匹配时，自动选中该选项，同步更新表单绑定值，触发optionSelected事件，行为和手动点击选项完全一致
• 异常处理：如果输入内容不在下拉选项范围内，不会触发自动选中，组件值保持原有状态，不会强行匹配错误值

注意：如果需要自定义匹配规则（比如忽略大小写、首尾空格），可以搭配displayWith属性统一处理选项显示值和输入值的格式，避免因为格式差异导致自动匹配失效。

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