Angular Material Autocomplete：始终显示自动完成选项

本文介绍了如何在 Angular Material Autocomplete 组件中，即使输入框未获得焦点，也能始终显示自动完成选项。通过设置 autofocus 属性或使用 MatAutocompleteTrigger 的 openPanel() 方法，可以轻松实现这一功能，提升用户体验。

Angular Material Autocomplete 提供了一种便捷的方式来为用户提供输入建议，但默认情况下，只有在输入框获得焦点并开始输入时，自动完成选项才会显示。 然而，在某些场景下，我们可能希望在页面加载时或在其他特定事件发生时，就直接显示自动完成选项，而无需用户手动点击输入框。以下介绍两种实现此目的的方法。

方法一：使用 autofocus 属性

最简单的方法是在 HTML 模板中，将 autofocus 属性添加到 input 元素。 这将使输入框在页面加载时自动获得焦点，从而触发自动完成菜单的显示。

<input autofocus [matAutocomplete]="myAutoComplete">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">
    {{option}}
  </mat-option>
</mat-autocomplete>

这种方法简单直接，适用于需要在页面加载时立即显示自动完成选项的场景。

方法二：使用 MatAutocompleteTrigger 的 openPanel() 方法

如果需要在组件的 TypeScript 代码中控制自动完成菜单的显示，可以使用 @ViewChild 装饰器来获取 MatAutocompleteTrigger 的实例，然后调用其 openPanel() 方法。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

首先，在组件的 TypeScript 文件中，使用 @ViewChild 获取 MatAutocompleteTrigger 的实例：

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

@Component({
  selector: 'app-autocomplete-example',
  templateUrl: './autocomplete-example.component.html',
  styleUrls: ['./autocomplete-example.component.component.css']
})
export class AutocompleteExampleComponent implements AfterViewInit {

  options: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig'];

  @ViewChild(MatAutocompleteTrigger) autocomplete!: MatAutocompleteTrigger;

  ngAfterViewInit() {
    // 在组件初始化后打开自动完成面板
    this.autocomplete.openPanel();
  }

}

然后，在组件的模板中，确保 input 元素与 mat-autocomplete 组件正确关联：

<input [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">
    {{option}}
  </mat-option>
</mat-autocomplete>

在这个例子中，ngAfterViewInit 生命周期钩子函数被用来在组件初始化完成后立即打开自动完成面板。也可以在其他事件处理函数中调用 this.autocomplete.openPanel()，以根据需要控制自动完成菜单的显示。

注意事项

• 确保已经正确导入了 MatAutocompleteModule 和 FormsModule 或 ReactiveFormsModule。
• 使用 autofocus 属性可能会影响页面的焦点管理，需要根据具体情况进行调整。
• 使用 openPanel() 方法时，需要确保 MatAutocompleteTrigger 实例已经被正确初始化。
• 考虑用户体验，避免过度使用自动显示自动完成选项，以免干扰用户的正常操作。

总结

通过 autofocus 属性或 MatAutocompleteTrigger 的 openPanel() 方法，可以灵活地控制 Angular Material Autocomplete 组件的显示行为，满足不同的业务需求。选择合适的方法取决于具体的应用场景和对控制粒度的要求。

以上就是Angular Material Autocomplete：始终显示自动完成选项的详细内容，更多请关注php中文网其它相关文章！