Angular Material 自动完成：onfocus 保持建议面板关闭

Question

我正在使用 Angular Material 7.3.7，我有一个简单的自动完成功能，类似于 documentation:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

有什么方法可以在输入焦点集中时让建议面板保持关闭状态？

我已经搜索过 API，但没有找到有用的信息。

提前致谢！

Answer 1

这是一个有点 hacky 的解决方案，但您可以使用 MatAutocompleteTrigger 的 closePanel 方法，如下所示

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #inp="matAutocompleteTrigger"
           (focus)="inputFocused(inp)"
           type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput [formControl]="myControl"
           [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

然后将以下方法添加到您的 ts 文件

focused(trg: MatAutocompleteTrigger) {
  setTimeout(() => {
    trg.closePanel();
  });
}

通过使用 settimeout，我们正在等待下一个变化检测周期，以便面板打开，然后我们关闭它。结果面板在几毫秒内打开和关闭。

希望对您有所帮助:)

=== 非 hacky 解决方案 ====

我检查了我的自动完成实现，在其中一个有大量选项的地方，我们使用了两个选项数组，一个是 allOptions，另一个是 filteredOptions。 filteredOptions 最初是空的，我在模板中只显示 filteredOptions。因此，除非用户键入要输入的内容，否则不会显示任何内容（实际上我强制至少两个字符开始过滤，因为 allOptions 有几千个选项）。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

在我的 ts 文件中；

allOptions: string[] = this.dataService.userOptions; // there are thousands of options
filteredOptions: string[] = [];

ngOnInit() {
  this.myControl.valueChanges.subscribe(z => {
    if (!z || z.length < 2) {
      this.filteredOptions = [];
    } else {
      this.filteredOptions = this.allOptions.filter(el => el.toLowerCase().indexOf(z.toLowerCase()) >= 0);
    }
}

我希望这对您有所帮助 :)

Answer 2

使用 matAutocompleteDisabled。我将它设置为禁用，然后捕获的 keyup 事件并切换该禁用标志。因此，当他们输入时，我会检测到 keyup，切换 disableAutocomplete，如果他们没有按 tab 或 escape，则打开面板。

[matAutocompleteDisabled]="禁用自动完成"

Angular Material 自动完成：onfocus 保持建议面板关闭

Angular Material Autocomplete: onfocus keep suggestion panel closed

onfocus

angular-material

angular