Angular 显示列表项的“离子搜索”按钮，但也需要启用选择

我试图为搜索选项提供一个自动完成的列表，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> 

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

---

所有的城市列表现在都出现了，但我需要启用该选项，通过单击该选项来选择正确的选项。是否有任何输入？

如果您希望允许用户选择其中一个选项，您只需处理

单击事件

<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> 

@sebeferras不确定我是否可以在同一胎面上提出不同的问题。如果不能接受，请告诉我。我有一个切换屏幕，可以更改搜索选项。我添加了一个段来切换两个选项，每次单击该段时，它都会更改搜索选项。但是，在I输入一些字符之前，上一个列表将显示在离子列表中。这令人困惑。有没有办法清除列表或隐藏离子列表。我已经尝试了ng If命令，但它不起作用。我建议创建一个新问题，添加尽可能多的代码，这样我们就可以看到如何重现这个问题（请随意将新问题的链接粘贴到这里，这样我会发现它更容易）。链接在这里
public onSelectItem(item: any): void {
    // Use the selected item...
    console.log(item.title);
}