有没有办法确定是否输入＆＃34; keypress来自Angular Material自动完成？

Question

我使用Angular Material Autocomplete控件作为搜索栏。搜索栏以相当典型的方式运行 - 用户键入其查询，按 Enter ，然后触发搜索。

但是，如果用户从自动填充中选择了一个建议（例如，＆＃34; beaton＆＃34;或者＆＃34; beck＆＃34;在下图中），我想要搜索< 被触发。

如何确定 Enter 按键是用户选择自动填充建议的结果还是用户触发搜索？

这两种情况都会导致我的onSearchKeydown函数被调用：

// my.controller.ts 
public async onSearchKeydown($event: KeyboardEvent) {
    if ($event.which === Key.Enter) {
        const results = await this.search(this.query);
    }
}

这是我的组件HTML的相关部分：

<!-- my.component.html -->
<mat-form-field>
    <input matInput
           autofocus
           [(ngModel)]="query"
           (keydown)="onSearchKeydown($event)"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let s of suggestions">
            <span>{{s.value}}</span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Answer 1

您可以检查是否有任何自动填充建议具有mat-active类。如果是，则通过选择自动填充建议触发。

Answer 2

你真的只需要知道＆＃34;查询＆＃34; value是一个可选择的选项。您可以在调用搜索之前在onSearchKeydown函数中执行此操作。类似的东西：

public async onSearchKeydown($event: KeyboardEvent) {
    if ($event.which === Key.Enter) {
        if (!this.suggestions.some(item => {
            return item.value === this.query;
        })) {
            const results = await this.search(this.query);
        }
    }
}

您也可以使用技巧。如果您的选项值是类或对象，则可以检查模型值是否与指示键入文本的字符串相对：

public async onSearchKeydown($event: KeyboardEvent) {
    if ($event.which === Key.Enter) {
        if (typeof this.query == 'string') {
            const results = await this.search(this.query);
        }
    }
}

suggestions = [
   { value: 'Apple' },
   { value: 'Banana' },
   { value: 'Cherry' }
];

displaySuggestion(suggestion) {
    return suggestion ? suggestion.value : '';
}

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displaySuggestion">
    <mat-option *ngFor="let s of suggestions" [value]="s">
        <span>{{s.value}}</span>
    </mat-option>
</mat-autocomplete>

此外 - 如果您绑定到(keyup.enter)而不是(keydown)，则不必检查密钥。