如何在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');
  }

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

在上面的示例中，我在 keyup 上过滤员工并将其显示在数据列表中，如果我选择一名员工或在员工上制表符，则其名称将填充在文本框中，但我想获取 (keyup.enter) 事件或制表符事件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 = "";

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

检查更多键码here