Question

我正在尝试提供“搜索”选项的列表以自动完成，并且html元素如下所示

<ion-searchbar [(ngModel)]="myInput" [showCancelButton]="shouldShowCancel" (ionInput)="filterItems()" (ionCancel)="onCancel($event)">
</ion-searchbar>
<ion-grid no-padding><ion-list >
 <ion-item *ngFor=" let item of filtereditems" color="silver" >
                          {{item.title}}
 </ion-item></ion-list> 
</ion-grid>

相应的search.ts文件如下

export class SearchPage{
 searchOptions: string = '';
    notesList: any;
    filtereditems:any;

constructor(){
 this.searchOptions= [
            {title: 'London'},
            {title: 'Bristol'},
            {title: 'Cardiff'},
            {title: 'Edinburgh'},
            {title: 'Belfast'},
            {title: 'Newcastle'}
            ];
            this.filtereditems=[];
}

  filterItems(){
        console.log(this.reasonForWithdrawal);
        this.filtereditems=this.notesList.filter((item) => {
            return item.title.toLowerCase().indexOf(this.reasonForWithdrawal.toLowerCase()) > -1;
        })
    }
}

所有城市列表都显示为弯曲，但是我还需要通过单击该选项来启用选择正确选项的选项。请输入任何内容？

Answer 1

如果要允许用户选择其中一个选项，则只需处理click事件

<ion-grid no-padding><ion-list >
    <ion-item *ngFor=" let item of filtereditems" (click)="onSelectItem(item)" color="silver">
        {{item.title}}
    </ion-item></ion-list> 
</ion-grid>

并在组件中添加一个方法来决定如何处理所选项目：

public onSelectItem(item: any): void {
    // Use the selected item...
    console.log(item.title);
}

IONIC搜索按钮显示列表项，但还需要启用选择

1 个答案: