IONIC Search 按钮显示列表项，但也需要启用选择

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

所有城市列表都是当前显示的，但我还需要通过单击启用 select 正确的选项。请输入任何信息？

Answer 1

如果你想允许用户select其中一个选项，你只需要处理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>

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

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

IONIC Search 按钮显示列表项，但也需要启用选择

IONIC Search button displaying the list item but need to enable the selection as well

ionic-framework

ionic2

ionic3

angular