如何在 Ionic 4 中搜索多个项目？

Question

我有一个显示多个任务的卡片列表。

html

<ion-toolbar>
  <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="setFilteredItems()" showCancelButton="focus"></ion-searchbar>
</ion-toolbar>

<ion-card *ngFor="let data of list let i = index">
  <ion-card-header>
    <ion-card-title  class = "linkCenter">{{data.Task}}</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <p>Status: <span style="color:#222428;" >{{data.StatusName}}</span></p>
    <p>Date: <span style="color:#222428;" >{{data.Date}}</span></p>
    <p>Auditors: <span style="color:#222428;" ><br><b>{{data.Auditors}}</b></span></p>
  </ion-card-content>
</ion-card>

我目前有搜索栏，可以使用以下代码搜索 data.Task

.ts

setFilteredItems() {
  this.list = this.filterItems(this.searchTerm);
}

filterItems(searchTerm: { toLowerCase: () => void; }) {
  return this.searchable.filter((item: { Task: { toLowerCase: () => { indexOf: (arg0: any) => number; }; }; }) => {
    return item.Task.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
  });
}

我想要的是还可以搜索的能力

同时

data.StatusName,data.Date,data.Auditors,data.Task.

这可能吗，因为所有 post 和教程似乎只搜索一项。

Answer 1

让我们关注搜索算法部分。

我的方法是：

Cast all searchables to strings

Remove empty space or regular characters

Concatenate all searchables to form 1 long string to represent that item for searching "hayStack"

Change case of needle and hayStack to lowercase

Search for needle in hayStack

然后我们可以使用以下内容搜索您的 searchables。

setFilteredItems() {
  this.list = this.filterItems(this.searchTerm);
}

filterItems(needle: string) {
  return this.searchable.filter(item => {
    // assuming all these data are string type
    const hayStack: string = (item.Task + item.StatusName + item.Date + item.Auditors).split(' ').join('').toLowerCase();

    needle = needle.split(' ').join('').toLowerCase();

    return hayStack.includes(needle);
  });
}

如何在 Ionic 4 中搜索多个项目？

How to search through multiple items in Ionic 4?

ionic4