how to make search-icon of ionic 2 in searchbox functional

Question

i am using ionic 2 searchbox for searching the data in my list . My question is how to consol.log my data in that searchbox, when i click on search ion in that which is present in the searchbar .

or is there any other method to filter the data like seachbox uning ion-input , and consol.log the data when i click on search icon

this my ts file

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;
  }

}

this is my 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>

Answer 1

You can do that by replacing the search bar component for a custom one made with a button and an input. That way we can control what's happen when the user clicks the search icon.

Component

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;
  }
}

View

<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>