Есть ли способ определить, произошло ли нажатие клавиши «Ввод» из автозаполнения углового материала? - PullRequest
Новая
       7

Есть ли способ определить, произошло ли нажатие клавиши «Ввод» из автозаполнения углового материала?

0 голосов
/ 11 июня 2018

Я использую элемент управления Angular Material Autocomplete в качестве строки поиска.Панель поиска ведет себя довольно типичным образом - пользователь вводит свой запрос, нажимает Enter , и поиск запускается.

Однако, если пользователь выбирает предложение из автозаполнения (дляНапример, "beaton" или "beck" на изображении ниже), я бы хотел, чтобы поиск не был запущен.

An Angular Material Autocomplete control

Как я могу определить, было ли нажатие клавиши 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>

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Вам действительно нужно знать, является ли значение «запрос» выбираемой опцией.И вы можете сделать это в функции 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) вам не нужно проверять ключ.

0 голосов
/ 11 июня 2018

Вы можете проверить, имеет ли какое-либо из предложений автозаполнения класс mat-active.Если да, то это было вызвано выбором автозаполнения.

...