角材料自动完成: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.

提前谢谢！

推荐答案

这是一个有点棘手的解决方案，但是您可以使用 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.

希望它会有所帮助:)

===非骇客解决方案====

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

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 :)

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