如何在下拉列表中添加搜索栏？

Question

我使用下拉列表并使用* ngFor显示数据。我想在下拉列表中使用搜索栏。

.html代码

     <ion-select item-end>
         <ion-option *ngFor="let list of dataa; let i= index;" (ionSelect)="pri(list,i)">{{list.USR}}</ion-option>  
</ion-select>

.ts代码

ngOnInit()
{
this.COMPANY = localStorage.getItem("COMPANY");
    this._logtask.newtask(this.COMPANY).subscribe(data => {
      console.log(data);
      this.dataa = data;
    });
}

要求：如何在离线

的下拉列表中添加搜索栏

  

请指教。提前谢谢。

Answer 1

<ion-searchbar>只是另一个UI组件。您应该只需将其添加到HTML并在页面上查看即可。然后将方法挂钩到ionInput事件，并根据用户输入的内容过滤列表（this.dataa）。下一级的改进可能是在这里使用一些可观察的。

我不确定你在寻找什么，但如果它适合你的UI，Angular Material自动完成组件也是一个不错的选择。这些组件可能有点笨拙，但它们与Ionic的Angular背景非常吻合。

https://material.angular.io/components/autocomplete/overview