如何实现Angular Material AutoComplete获焦时始终显示提示面板？

核心思路 #

Angular Material的mat-autocomplete默认在没有<mat-option>元素时会自动关闭面板，要实现无选项时保持面板展开，需要手动控制面板的显示状态，同时保留选中选项后自动关闭的默认行为。

具体实现步骤 #

1. 获取Autocomplete触发器引用 #

在组件类中通过ViewChild获取MatAutocompleteTrigger实例，用于手动控制面板的展开与关闭：

import { Component, ViewChild, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements OnInit {
  userCtrl = new FormControl('');
  filteredOptions!: Observable<any[]>;
  isLoading = false;
  filteredOptionsValue: any[] = []; // 存储Observable的最新值，用于判断选项数量

  // 获取Autocomplete触发器
  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger!: MatAutocompleteTrigger;

  ngOnInit() {
    // 初始化filteredOptions（替换为你的实际数据逻辑）
    this.filteredOptions = this.userCtrl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || ''))
    );

    // 订阅filteredOptions，更新本地存储的选项列表
    this.filteredOptions.subscribe(options => {
      this.filteredOptionsValue = options;
      this.updatePanelVisibility();
    });

    // 监听输入值变化，控制面板显示
    this.userCtrl.valueChanges.pipe(
      startWith('')
    ).subscribe(() => {
      this.updatePanelVisibility();
    });
  }

  private _filter(value: string): any[] {
    // 替换为你的实际过滤逻辑
    const filterValue = value.toLowerCase();
    // return this.userList.filter(user => user.toLowerCase().includes(filterValue));
    return [];
  }

  displayFn(option: any): string {
    return option ? option : '';
  }
}

2. 实现面板可见性控制逻辑 #

添加updatePanelVisibility方法，根据输入长度、加载状态、选项数量判断是否需要展开面板：

updatePanelVisibility() {
  // 判断是否需要保持面板展开的条件
  const shouldKeepOpen = this.userCtrl.value !== null && (
    this.userCtrl.value.length < 3 ||
    this.isLoading ||
    this.filteredOptionsValue.length === 0
  );

  // 若满足条件且面板未打开，则手动展开
  if (shouldKeepOpen && !this.autocompleteTrigger.panelOpen) {
    this.autocompleteTrigger.openPanel();
  }
}

同时在模板的输入框上绑定focus事件，确保获焦时触发面板状态更新：

<input type="text" matInput [formControl]="userCtrl" [matAutocomplete]="auto" (focus)="updatePanelVisibility()">

3. 处理选中选项后的面板关闭 #

给mat-autocomplete绑定optionSelected事件，选中选项时手动关闭面板：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onOptionSelected()">
  @if(userCtrl.value?.length < 3) { 
    <div class="no-option-message">输入至少3个字符</div>
  } @else if(isLoading) {
    <div class="no-option-message">加载中...</div>
  } @else if (!filteredOptionsValue.length) {
    <div class="no-option-message">未找到匹配结果</div>
  }
  @for (option of filteredOptions | async; track option) {
    <mat-option [value]="option">{{option}}</mat-option>
  }
</mat-autocomplete>

在组件类中添加事件处理方法：

onOptionSelected() {
  this.autocompleteTrigger.closePanel();
}

4. 样式优化 #

给提示文本添加样式，使其与选项的排版一致：

.no-option-message {
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.6);
  cursor: default;
}

关键说明 #

• 输入框失焦时，面板会自动关闭，无需额外处理，符合用户预期。
• 通过订阅filteredOptions将异步值存储到本地变量，避免在模板或同步逻辑中直接处理Observable导致的问题。
• 手动控制面板状态时，仅在需要展开且面板未打开时调用openPanel()，避免重复触发。

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