mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
test(searchbar): added some code to the searchbar nav test based on the docs
This commit is contained in:
@ -17,7 +17,72 @@ class FirstPage {
|
||||
templateUrl: 'second.html'
|
||||
})
|
||||
class SecondPage {
|
||||
constructor() {
|
||||
this.searchQuery = '';
|
||||
this.initializeItems();
|
||||
}
|
||||
|
||||
initializeItems() {
|
||||
this.items = [
|
||||
'Amsterdam',
|
||||
'Bogota',
|
||||
'Buenos Aires',
|
||||
'Cairo',
|
||||
'Dhaka',
|
||||
'Edinburgh',
|
||||
'Geneva',
|
||||
'Genoa',
|
||||
'Glasglow',
|
||||
'Hanoi',
|
||||
'Hong Kong',
|
||||
'Islamabad',
|
||||
'Istanbul',
|
||||
'Jakarta',
|
||||
'Kiel',
|
||||
'Kyoto',
|
||||
'Le Havre',
|
||||
'Lebanon',
|
||||
'Lhasa',
|
||||
'Lima',
|
||||
'London',
|
||||
'Los Angeles',
|
||||
'Madrid',
|
||||
'Manila',
|
||||
'New York',
|
||||
'Olympia',
|
||||
'Oslo',
|
||||
'Panama City',
|
||||
'Peking',
|
||||
'Philadelphia',
|
||||
'San Francisco',
|
||||
'Seoul',
|
||||
'Taipeh',
|
||||
'Tel Aviv',
|
||||
'Tokio',
|
||||
'Uelzen',
|
||||
'Washington'
|
||||
];
|
||||
}
|
||||
|
||||
getItems(searchbar) {
|
||||
// Reset items back to all of the items
|
||||
this.initializeItems();
|
||||
|
||||
// set q to the value of the searchbar
|
||||
var q = searchbar.value;
|
||||
|
||||
// if the value is an empty string don't filter the items
|
||||
if (q.trim() == '') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.items = this.items.filter((v) => {
|
||||
if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@App({
|
||||
|
@ -8,6 +8,10 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
<ion-searchbar primary placeholder="Filter Schedules">
|
||||
</ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="#item of items">
|
||||
{{ item }}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
Reference in New Issue
Block a user