Angular Material Autocomplete:onfocus 保持建议面板关闭

问题描述

我正在使用 Angular Material 7.3.7 并且我有一个简单的自动完成类似于 文档:

I am using Angular Material 7.3.7 and i have a simple autocomplete similiar like in the 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>

当输入变得聚焦时，有没有办法让建议面板保持关闭?

Is there any way to keep the suggestion panel closed when the input is getting focused?

我已经搜索了 API，但没有发现任何有用的东西.

I already searched through the API but I found nothing helpfull.

提前致谢！

推荐答案

这是一个有点hacky的解决方案，但你可以使用 MatAutocompleteTrigger 如下

it is a bit hacky solution but you can use closePanel method of MatAutocompleteTrigger as follows

<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 文件中

then add following method to your ts file

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

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

by using settimeout we are waiting for next changedetection cycle so that panel gets open and then we close it. as a result panel gets opened and closed in a couple of miliseconds.

希望有帮助:)

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

=== non hacky solution ====

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

i checked my autocomplete implementations and in one of them where we have a large number of options we used two option arrays one is allOptions other is filteredOptions. filteredOptions is initially empty and I am showing only filteredOptions in the template. So unless user types something to input nothing gets showed (actually i enforce at least two characters to start filtering because allOptions has a couple thousand of options ).

<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 文件中；

in my ts file;

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);
    }
}

我希望这有更多帮助:)

i hope this helps more :)

这篇关于Angular Material Autocomplete:onfocus 保持建议面板关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！