Как получить (keyup.enter) событие по опции datalist в Angular 6?

Question

Как получить событие (keyup.enter) для опции списка данных в Angular 6

Мой HTML-код:

<input list="filteredArray" (keyup)="filterRecord(empForm.controls['empname'].value)" type="text" formControlName="empname" />
  <datalist id="filteredArray">
     <option (keyup.enter)="SelectRecord()" *ngFor="let item of filteredArray">{{item}}</option>
  </datalist>

Мой код машинописного текста:

filtervendor(name: any) {
   this.filteredArray = ['AB','SD','DF','FG'];
}

SelectRecord() {
    console.log('select');
  }

Вышеупомянутое решение работает для кнопки ввода.

В приведенном выше примере я фильтрую сотрудников по ключу и показываю его в списке данных, если я выберу одного сотрудника или выберем вкладку.у сотрудника его имя заполняется в текстовом поле, но я хочу получить событие (keyup.enter) или событие табуляции для параметра в списке данных, а FilterArray становится пустым.

Answer 1

Вам не нужно фильтровать datalist самостоятельно, браузер сделает это за вас.В конце концов, это просто набор предопределенных значений.Вы можете получить "selected" с помощью [(ngModel)], как с любым другим входом.

Пример:

<input  type="text" name="empname" list="filteredArray" [(ngModel)]="inputValue"/>
<datalist id="filteredArray">
  <option *ngFor="let item of filteredArray">{{item}}</option>
</datalist>

<p>
  The value is: {{inputValue}}
</p>

TS:

  filteredArray = ['AB', 'SD', 'DF', 'FG'];
  inputValue = "";

Демонстрация Stackblitz: https://stackblitz.com/edit/angular-s9o9dt

Answer 2

HTML-код

<input list="filteredArray" (keyup)="filterRecord(empForm.controls['empname'].value, $event)" type="text" formControlName="empname" />
              <datalist id="filteredArray">
                <option (keyup.enter)="SelectRecord()" *ngFor="let item of filteredArray">{{item}}</option>
              </datalist>

Введите код сценария

   private filterRecord(value, event)
        {
            if (event.keyCode == 13)
            {
               // enter keycode
            }        
            else if (event.keyCode == 9)
            {
               // tab keycode
            } 
        }

проверьте наличие дополнительных кодов клавиш здесь