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

Posted 2021-04-06

我使用下拉列表并使用* 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;
    });
}

要求： - 如何在离子下拉列表中添加搜索栏

请指教。提前致谢。

答案

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

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

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

另一答案

Ionic不提供离子选择中的默认搜索方法。但是this自定义组件可以完成这项工作。您可能需要使用css并将页面添加到自定义madal中，使其看起来类似于默认的离子选择选项。

所有信用都归原始创作者所有。