如何在Angular 6中获取datalist选项的（keyup.enter）事件？

Question

如何在Angular 6中获取datalist选项的（keyup.enter）事件

我的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');
  }

以上解决方案适用于输入按钮。

在上面的示例中，我正在过滤员工的密钥并将其显示在datalist中，如果我选择一个员工或选项卡上的员工，其名称填写在文本框中但我想获取（keyup.enter）事件或tab out事件以获取datalist中的选项和filteredArray变空。

Answer 1

您不需要自己过滤datalist，浏览器会为您执行此操作。毕竟它只是一组预定义的值。你可以使用[(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 = "";

S tackb tz但是：kuzxsw poi

Answer 2

HTML代码

https://stackblitz.com/edit/angular-s9o9dt

输入脚本代码

<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
            } 
        }