ionic-framework/src/components/searchbar/test/nav/index.ts

import { Component } from '@angular/core';
import { ionicBootstrap, NavController, NavParams } from '../../../../../src';


@Component({
  templateUrl: 'main.html'
})
class MainPage {
  constructor(private _nav: NavController) { }

  goToSecond() {
    this._nav.push(SearchPage);
  }
}

@Component({
  templateUrl: 'search.html'
})
class SearchPage {
  items: string[];

  constructor(private _nav: NavController) {
    this.initializeItems();
  }

  showDetail(item: any) {
    this._nav.push(DetailPage, {city: item});
  }

  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(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set q to the value of the searchbar
    var q = ev.target.value;

    // if the value is an empty string don't filter the items
    if (!q || q.trim() === '') {
      return;
    }

    this.items = this.items.filter((v) => {
      if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
        return true;
      }
      return false;
    })
  }
}

@Component({
  templateUrl: 'detail.html'
})
class DetailPage {
  city: string;

  constructor(private _navParams: NavParams) {
    this.city = _navParams.get('city');
  }
}

@Component({
  templateUrl: 'tabs.html'
})
class TabsPage {
  mainPage = MainPage;
  searchPage = SearchPage;
}

@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
  root = TabsPage;
}

ionicBootstrap(E2EApp);