docs(demos): add search demo

This commit is contained in:
Drew Rygh
2015-11-12 14:20:36 -06:00
parent 73f6265044
commit 24d823ab5f
4 changed files with 85 additions and 0 deletions

View File

@ -97,6 +97,7 @@ export function getPageFor(hash) {
'segment': inputs.SegmentPage, 'segment': inputs.SegmentPage,
'select': inputs.SelectPage, 'select': inputs.SelectPage,
'switch': inputs.SwitchPage, 'switch': inputs.SwitchPage,
'search': inputs.SearchPage,
'inputs': labels.BasicPage, 'inputs': labels.BasicPage,
'fixed-inline-labels': labels.FixedInlinePage, 'fixed-inline-labels': labels.FixedInlinePage,

View File

@ -1,6 +1,7 @@
export * from './checkbox/pages'; export * from './checkbox/pages';
export * from './radio/pages'; export * from './radio/pages';
export * from './range/pages'; export * from './range/pages';
export * from './search/pages';
export * from './segment/pages'; export * from './segment/pages';
export * from './select/pages'; export * from './select/pages';
export * from './switch/pages'; export * from './switch/pages';

View File

@ -0,0 +1,69 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'inputs/search/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class SearchPage{
constructor() {
this.searchQuery = '';
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() {
var q = this.searchQuery;
if(q.trim() == '') {
return this.items;
}
return this.items.filter((v) => {
if(v.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
return true;
}
return false;
})
}
}

View File

@ -0,0 +1,14 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>
Search
</ion-title>
</ion-navbar>
<ion-content>
<ion-searchbar [(ng-model)]="searchQuery"></ion-searchbar>
<ion-list #list>
<ion-item *ng-for="#item of getItems()">
{{item}}
</ion-item>
</ion-list>
</ion-content>