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

Question

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

1

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

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

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

Nathan Friend 11 июнь 2018, в 22:30

Источник

Теги:

angular

javascript

angular-material

angular-material2

2 ответа

Ещё вопросы

G. Tranter · Answer 1 · 2018-06-12T18-25-00.000Z

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

alexanto · Answer 2 · 2018-06-11T18-55-00.000Z

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