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>

In your code you're using the `ionInput` event in the searchbar, so the results are being filtered every time you type something on it. You can use an input and a button to do something when the user clicks the button, but this way the behaviour will be different (the items are going to be filtered just when clicking on the button). Is that ok in the context of your app? I can create a demo if this is the expected answer to you question. — sebaferreras, Dec 23 '16 at 07:10

sebaferreras · Accepted Answer · 2017-10-02T07:49:20.813

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>

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

1 Answers1