CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
Vinee
Vinee

Reputation: 402

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

I am trying to provide a list for the Search option to auto complete, And the html element is as below

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

The corresponding search.ts file is as below

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

All the city list is appearing currenlty, but I need to enable the option to select the right option by clicking on that as well. Any inputs please?

Upvotes: 1

Views: 241

Answers (1)

sebaferreras
sebaferreras

Reputation: 44669

If you want to allow the user to select one of the options, you just need to handle the click event

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

And add a method in your component to decide what to do with the selected item:

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

Upvotes: 1

Related Questions