如何在Angular Material自动完成组件中识别选中选项并处理Tab键行为

这个需求很常见，我来给你一套可行的解决方案，核心思路是监听Tab键事件，拦截默认的焦点切换行为，转而选中当前高亮的自动完成选项：

步骤1：调整模板代码 #

首先要在输入框上获取MatAutocompleteTrigger的引用，这样我们能访问自动完成面板的状态（比如当前高亮的选项），同时修改Tab键的事件处理函数：

<div class="search-box">
  <i class="material-icons">search</i>
  <input 
    #inputText 
    mdInput 
    [mdAutocomplete]="issuingAsset" 
    #autoTrigger="matAutocompleteTrigger" <!-- 添加触发器引用 -->
    [attr.maxlength]="15" 
    [(ngModel)]="assetSearch" 
    (input)="inputText.value=$event.target.value.toUpperCase()" 
    (keydown.tab)="handleTabOnAutocomplete($event, autoTrigger)" <!-- 修改事件处理 -->
    (keyup)="onAutoCompleteSearch()"
  />
  <md-autocomplete #issuingAsset="mdAutocomplete" (optionSelected)="onOptionSelected($event)">
    <!-- 你的选项模板，根据实际业务调整 -->
    <md-option *ngFor="let asset of filteredAssets | async" [value]="asset">
      {{ asset.name }} <!-- 假设你的资产对象有name字段，按需修改 -->
    </md-option>
  </md-autocomplete>
</div>

步骤2：实现组件逻辑 #

在你的组件类中，引入必要的Angular Material类，然后编写Tab键的处理函数：

import { Component } from '@angular/core';
import { MatAutocompleteTrigger, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  assetSearch: string;
  filteredAssets: Observable<any[]>; // 假设你的过滤后资产是Observable类型

  // ... 其他现有业务逻辑

  handleTabOnAutocomplete(event: KeyboardEvent, trigger: MatAutocompleteTrigger) {
    // 只有当面板中有高亮选项时，才拦截Tab的默认行为
    if (trigger.activeOption) {
      // 阻止Tab键切换焦点到下一个字段
      event.preventDefault();
      // 选中当前高亮的选项
      trigger.activeOption.select();
      // 关闭自动完成面板
      trigger.closePanel();
      // 复用点击选项时的处理逻辑，保证行为一致
      this.onOptionSelected({ option: trigger.activeOption } as MatAutocompleteSelectedEvent);
    }
    // 如果没有高亮选项，保留Tab的默认焦点切换行为
  }

  onOptionSelected(event: MatAutocompleteSelectedEvent) {
    // 更新ngModel绑定的值
    this.assetSearch = event.option.value;
    // 执行你原本的搜索逻辑
    this.onSearchByAsset();
  }

  onSearchByAsset() {
    // 你的现有搜索处理代码
  }

  onAutoCompleteSearch() {
    // 你的自动完成过滤逻辑，比如：
    // this.filteredAssets = this.assetService.filterAssets(this.assetSearch);
  }
}

关键点说明 #

• MatAutocompleteTrigger.activeOption: 这个属性会实时更新为用户用上下箭头导航时高亮的选项，我们通过它判断是否需要拦截Tab事件。
• 阻止默认行为: 调用event.preventDefault()避免Tab键将焦点切换到下一个表单字段，保证选中选项的逻辑优先执行。
• 统一选中逻辑: 通过调用trigger.activeOption.select()和触发onOptionSelected，让Tab选中选项和鼠标点击选项的行为完全一致，避免业务逻辑分散。

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