如何在搜索框中使 ionic 2 的搜索图标起作用答案

【问题标题】：how to make search-icon of ionic 2 in searchbox functional如何在搜索框中使 ionic 2 的搜索图标起作用
【发布时间】：2017-05-08 18:45:32
【问题描述】：

我正在使用 ionic 2 搜索框来搜索我列表中的数据。我的问题是如何在该搜索框中 consol.log 我的数据，当我单击搜索栏中存在的搜索离子时。

或者是否有任何其他方法来过滤数据，例如 seachbox uning ion-input ，并在我单击搜索图标时 consol.log 数据

这是我的 ts 文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


@Component({
  templateUrl: 'home.html',
})

export class HomePage {
private searchQuery: string = '';
  private items: string[];

  listitme:string= '' ;

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

  initializeItems() {
    this.items = [
      'Harvey Burton',
      'Barnett Crosby',
      'Peck Brock',
      'Rachel Robinson',
      'Suzette Frazier',
      'Bettie Maddox',
      'Haley Bates',
      'Tania Chandler',
      'Woods Nicholson'
    ]
  }

  getItems(ev: any) {

    this.initializeItems();

    let val = ev.target.value;

    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

  setitem(item){
    this.listitme = item;
  }

}

这是我的html

<ion-header>

  <ion-navbar>
    <ion-title>search</ion-title>
  </ion-navbar>

  <ion-toolbar primary >
    <ion-searchbar (ionInput)="getItems($event)"  [(ngModel)]="listitme" ></ion-searchbar>
  </ion-toolbar>

</ion-header>


<ion-content padding>

<ion-list>
  <ion-item *ngFor="let item of items">

    <div (click)=setitem(item) >  
      {{ item }}
    </div>

  </ion-item>
</ion-list>  

</ion-content>

【问题讨论】：

在您的代码中，您在搜索栏中使用ionInput 事件，因此每次您在其上输入内容时都会过滤结果。当用户单击按钮时，您可以使用输入和按钮来执行某些操作，但是这样行为会有所不同（仅在单击按钮时才会过滤项目）。在您的应用程序的上下文中可以吗？如果这是您问题的预期答案，我可以创建一个演示。
你即使这样也可以。请创建一个演示，谢谢

标签： angular typescript ionic2 ionic3 ionic2-select

【解决方案1】：

您可以通过将搜索栏组件替换为使用按钮和输入创建的自定义组件来做到这一点。这样我们就可以控制用户点击搜索图标时发生的事情。

组件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {
private items: string[];

  query: string = "";
  listitme:string= '' ;

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

  initializeItems() {
    this.items = [
      'Harvey Burton',
      'Barnett Crosby',
      'Peck Brock',
      'Rachel Robinson',
      'Suzette Frazier',
      'Bettie Maddox',
      'Haley Bates',
      'Tania Chandler',
      'Woods Nicholson'
    ]
  }

  getItems() {
    // Here you can add your console.log(...);
    console.log('The search button has been clicked...');

    this.initializeItems();
    let val = this.query
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

  setitem(item){
    this.listitme = item;
  }
}

查看

<ion-header>
  <ion-toolbar primary>
    <ion-row>
      <ion-col (click)="getItems()" width-10>
        <button ion-button clear icon-only>
          <ion-icon color="dark" name="search"></ion-icon>
        </button>
      </ion-col>
      <ion-col width-90>
        <ion-input [(ngModel)]="query" type="text" placeholder="Search..."></ion-input>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<ion-list>
  <ion-item *ngFor="let item of items">
    <div (click)=setitem(item) >  
      {{ item }}
    </div>
  </ion-item>
</ion-list>  
</ion-content>

【讨论】：