HTML5 实现angular2可编辑的下拉框

HTML5中新增了<datalist>标签，它可以为 <input> 指定预定义选项列表，在使用时<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性才能生效。

<datalist>是HTML5的属性，所以只能在支持H5的浏览器中使用。

用户在他们输入数据时会看到预定义选项的下拉列表，由于<datalist>自带搜索功能，所以使用时想看到所有下拉选项必须清空<input>中的内容。

<div>
    <input [(ngModel)]="num" list="numbers"/>
    <datalist id="numbers">
       <option *ngFor="let item of nums" [value]="item">
    </datalist>
</div>

TS

private nums:number[];
private num:number;
ngOnInit() {
    this.nums=[1,2,3,4,5,6]
    this.num=1;
}