Кнопка 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;
        })
    }
}

Весь список городов отображается постоянно, но мне нужно включить опцию, чтобы выбрать нужную опцию, нажав на нее.Любые входы, пожалуйста?

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