typescript Angular Material：当用户点击输入键时隐藏自动完成面板

Angular Material: Hide Autocomplete Panel when User hits enter Key

提问by Ekos

I'm currently working on a table where the user is able to tab through editable elements by pressing enter. I also use Angular Material in this.

我目前正在处理一个表格，用户可以通过按回车键来浏览可编辑元素。我也在这个中使用了 Angular Material。

I have a mat-form-field with several dynamically created input fields with the mat-autocomplete element. However my enter key event acts a bit different in this.

我有一个带有 mat-autocomplete 元素的动态创建的输入字段的 mat-form-field。然而，我的输入键事件在这方面有点不同。

When you press on the input field, a panel will open (dropdown) where the user can select the input or he can simply write himself and the panel will give suggestions (autocomplete).

当您按下输入字段时，将打开一个面板（下拉菜单），用户可以在其中选择输入，或者他可以简单地自己编写，面板将提供建议（自动完成）。

What happens if you press the tab key?

如果按tab键会发生什么？

If you press on tab while typing, the cursor will move onto the next editable element and the panel (dropdown) of the latest element will close.

如果您在键入时按 Tab，光标将移动到下一个可编辑元素上，并且最新元素的面板（下拉菜单）将关闭。

What happens if you press the enter key

如果按回车键会发生什么

If you press on enter while typing, the cursor will move onto the next editable element HOWEVER the panel (dropdown) of the latest element stays open which resulst in multiple input fields having an open dropdown panel even though the user has already wrote what he needed to.

如果您在键入时按 Enter，光标将移动到下一个可编辑元素上，但是最新元素的面板（下拉菜单）保持打开状态，这会导致多个输入字段具有打开的下拉面板，即使用户已经编写了他需要的内容到。

Template:

模板：

<tr *ngFor="let row of rows; let rowIdx = index">
            <td *ngFor="let col of columns; let colIdx = index">
                <mat-form-field class="example-full-width">             
                <input  #inputs type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"
                    (keyup.enter)="shiftFocusEnter(rowIdx, colIdx)">
                    <mat-autocomplete #auto="matAutocomplete">
                            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                            {{ option }}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>
            </td>
      </tr>

This simply creates rows based on the number of objects in an array (not quite important here).

这只是根据数组中的对象数量创建行（这里不是很重要）。

There's also a keyup.enter event on the input fields which gets triggered when ever the user presses on enter while focus is on an input field and passes row index and column index to get the next editable element.

输入字段上还有一个 keyup.enter 事件，当用户在焦点位于输入字段时按下 Enter 键并传递行索引和列索引以获取下一个可编辑元素时，就会触发该事件。

Component:

零件：

shiftFocusEnter(rowIdx: number, colIdx: number) {
console.log("Enter", rowIdx, colIdx);  
if(colIdx == 4 && rowIdx == 5) {
  console.log("Reached end of row");
}
else {
  colIdx = colIdx + this.columns.findIndex(c => c.editable);
  this.autocomplete.showPanel = false;
  this.focusInput(rowIdx, colIdx);
}

}

}

This function receives two parameters. Row Index and Column Index and calculates the index of the next editable element to focus on that.

该函数接收两个参数。行索引和列索引并计算下一个可编辑元素的索引以关注它。

The line this.autocomplete.showPanel = falsewas written to see if I could simply close the panel like this but it didnt work.

这行this.autocomplete.showPanel = false是为了看看我是否可以像这样简单地关闭面板，但它没有用。

this.autocompleteis an object of class MatAutocomplete. I've added this by writing

this.autocomplete是MatAutocomplete类的一个对象。我已经通过写作添加了这个

@Input('matAutocomplete')
autocomplete: MatAutocomplete

What I need:

我需要的：

I want the dropdown panel of the mat autocomplete element to close after pressing enter.

我希望 mat 自动完成元素的下拉面板在按下 Enter 后关闭。

Thanks in advance!

提前致谢！

Update:

更新：

So after working a bit I found this

所以在工作之后我发现了这个

@ViewChild('test', { read: MatAutocompleteTrigger }) test: MatAutocompleteTrigger;

+

+

this.test.closePanel();

This time I'm able to close the panel of the FIRST cell in the table however all the panels of the other input fields will stay open

这次我可以关闭表格中第一个单元格的面板，但是其他输入字段的所有面板都将保持打开状态

回答by William Hampshire

My use case was slightlydifferent so your update didn't work for me, but I found a slightlydifferent solution that does the trick:

我的用例略有不同，所以你的更新对我不起作用，但我发现了一个稍微不同的解决方案：

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

Then you can use this to close the dropdown options:

然后您可以使用它来关闭下拉选项：

this.autocomplete.closePanel(); 

Make sure to also import ViewChild:

确保还导入 ViewChild：

import { ViewChild } from '@angular/core';

Works like a charm.

奇迹般有效。

回答by Tim

This commentprovides a solution where you can get a reference to the matAutocompleteTriggerdirectly on the input element, so that you can call closePanel() within the template. For example:

此注释提供了一种解决方案，您可以在其中直接在输入元素上获取对matAutocompleteTrigger的引用，以便您可以在模板中调用 closePanel()。例如：

    <input
      type="text"
      matInput
      #trigger="matAutocompleteTrigger"
      (keydown.enter)="$event.target.blur(); trigger.closePanel()"
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />

回答by andres robanesky

// This is my solution  ios/android panel not hide on done button virtual // 


<input type="text" placeholder="{{lbl.TipDoc}}"
class="form-control ui-inputtext ui-widget autocomp"
 #trigautoTipDoc ="matAutocompleteTrigger"
 aria-label="name" matInput                                        (blur)="OcuPanelAuto(trigautoTipDoc);"
formControlName="tipDocLbl" [matAutocomplete]="autoTipDoc" >
<mat-autocomplete #autoTipDoc="matAutocomplete" role="combobox">
<mat-option  *ngFor="let option of tipDocFiltObs | async"
                                                            [value]="option.name">
 {{option.name}}
</mat-option>
</mat-autocomplete>


OcuPanelAuto(cc: MatAutocompleteTrigger) {
        setTimeout(function a() {
            cc.closePanel();
        }, 130);
    }