In my ionic app, I want a drop-down list like shown in below image
This is my code. I want drop-down to be in the same page can anyone help me?
<ion-header>
<ion-navbar>
<ion-title>Ionic Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Type something to see the results.</p>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list *ngIf="showList">
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
This is ts file
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
showList: boolean = false;
searchQuery: string = '';
items: string[];
constructor() {
this.initializeItems();
}
initializeItems() {
this.items = [
'Amsterdam',
'Berlin',
'Bueno Aires',
'Madrid',
'Paris'
];
}
getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
// Filter the items
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
// Show the results
this.showList = true;
} else {
// hide the results when the query is empty
this.showList = false;
}
}
}