Ionic组件之Searchbar：

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

效果图

直接上代码

searchbar.html

<ion-header>
    <ion-navbar>
        <ion-title>
            Searchbars
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of items">{{ item }}</ion-item>
    </ion-list>
</ion-content>

searchbar.ts

import { Component } from '@angular/core';

@Component({
    templateUrl:'searchbar.html'
})

export class Searchbar{
    items;
    constructor(){
        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(ev){
        this.initializeItems();
        var val=ev.target.value;
        if(val&&val.trim()!=''){
            this.items=this.items.filter((item)=>{
                return (item.toLowerCase().indexOf(val.toLowerCase())>-1)
            })
        }
    }
}