搜索栏

搜索栏绑定到模型，并在模型更改时发出输入事件。

有关更多信息，请查看API文档。

基础使用

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

请注意，在此示例中，当输入更改时调用getItems（）函数，更新显示的城市。 虽然此示例基于搜索输入过滤列表，但可以在许多不同的场景中使用Searchbar：

@Component({
  templateUrl: 'search/template.html',
})
class SearchPage {

  searchQuery: string = '';
  items: string[];

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  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() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

效果：