0

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

在此处输入图像描述

或者是否有任何其他方法来过滤数据，如 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>
4

1 回答 1

3

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

零件

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>
于 2016-12-23T14:24:06.373 回答