Question

我正在使用离子2搜索框来搜索列表中的数据。我的问题是当我点击搜索栏中存在的搜索离子时，如何在该搜索框中记录我的数据。

还是有其他任何方法来过滤数据，如seachbox uning ion-input，并在我点击搜索图标时记录数据

这是我的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>

Answer 1

您可以通过将搜索栏组件替换为使用按钮和输入创建的自定义组件来实现。这样我们就可以控制用户点击搜索图标时会发生什么。

<强>组件

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>

如何在searchbox功能中使离子2的搜索图标

1 个答案: