如何在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.enter）事件或tab out for for for for forDatalist和FilterDarray中的选项为空。

Answer 1

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

在此处检查更多密钥编码

Answer 2

您不需要自己过滤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