как сделать иконку поиска ionic 2 в окне поиска работоспособной

Я использую окно поиска 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>

typescript angular ionic3 ionic2 ionic2-select
person inoxe    schedule 23.12.2016    source источник
comment
В вашем коде вы используете событие ionInput на панели поиска, поэтому результаты фильтруются каждый раз, когда вы что-то вводите в него. Вы можете использовать ввод и кнопку, чтобы что-то делать, когда пользователь нажимает кнопку, но в этом случае поведение будет другим (элементы будут фильтроваться только при нажатии на кнопку). Это нормально в контексте вашего приложения? Я могу создать демонстрацию, если это ожидаемый ответ на ваш вопрос.   -  person sebaferreras    schedule 23.12.2016
comment
Я даже это было бы хорошо. пожалуйста, создайте демо, спасибо   -  person inoxe    schedule 23.12.2016

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете сделать это, заменив компонент панели поиска на пользовательский с кнопкой и вводом. Таким образом, мы можем контролировать, что происходит, когда пользователь щелкает значок поиска.

Компонент

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>
person sebaferreras    schedule 23.12.2016