검색 상자에서 이온 2의 검색 아이콘을 만드는 방법

Question

내 목록에서 데이터를 검색하는 데 ionic 2 검색 창을 사용하고 있습니다. 내 질문은 검색 상자에있는 검색 항목을 클릭하면 해당 검색 상자에서 내 데이터를 consol.log로 저장하는 방법입니다.

아니면 검색 아이콘

을 클릭하면이 제 TS는 파일 이온 입력을 내부 튜닝 seachbox 같은 데이터를 필터링하고, 데이터를 consol.log하는 다른 방법이있다

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

} 

당신은 REPL에 의해

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

이라고 할 수있다 단추 및 입력으로 만들어진 사용자 지정 검색 막대 구성 요소 acing. 그렇게하면 사용자가 검색 아이콘을 클릭 할 때 발생하는 상황을 제어 할 수 있습니다.

구성 요소

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

보기 당신은 검색 창에 'ionInput` 이벤트를 사용하고, 그래서 결과는 당신이 뭔가를 입력 할 때마다 필터링되는 코드에서

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