Question

如何在Angular 6的数据列表选项中获取（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）事件或跳出事件数据列表中的选项，filteredArray为空。

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

检查更多键码here

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

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

2 个答案: