Ionic 3 中文搜索栏答案

【问题标题】：Ionic 3 Search bar in Chinese LanguageIonic 3 中文搜索栏
【发布时间】：2018-01-26 04:08:58
【问题描述】：

我正在构建一个搜索栏，以根据插入的中文名称过滤项目。现在我可以根据它的英文名称而不是中文名称进行搜索了。

我应该如何进行中文文本搜索？

输出：

源代码： (HTML)

<ion-toolbar>
    <ion-searchbar aria-placeholder="search" 
                  [(ngModel)]="queryText"
                  (ionInput)="updateText()">
    </ion-searchbar>
  </ion-toolbar>
  <ion-item >

    <ion-label>Name</ion-label>
    <ion-label>Description</ion-label>
    <ion-label>Chinese Name</ion-label>
</ion-item>

<ion-item *ngFor="let item of filtered" >
  <ion-label>{{item.name}} </ion-label>
  <ion-label>{{item.description}} </ion-label>
  <ion-label>{{item.chinese}} </ion-label> 
</ion-item>

fd.name 属性上的英文(Filter Function)

updateText(){
    if (this.queryText == ""){ //if no text insert then display all
      this.filtered = this.food; // Original array with food elements can be [] also
    }
    else{
      this.filtered = this.food.filter((fd) => {
        return fd.name.toLowerCase().indexOf(this.queryText.toLowerCase()) > -1; //filter food.name
      })
    }

我应该将 fd.name 属性更改为 fd.chinese 名称吗？

【问题讨论】：

标签： javascript firebase search ionic-framework filter

【解决方案1】：

如果你想用中文文本搜索，你必须先使用原始列表，因为当你开始搜索时，代码会执行两次，首先搜索文本形式是拼音，然后是中文文本。如果不恢复列表，则无法获取结果过滤器。例如：

 if(this.searchQuery && this.searchQuery.trim() != ''){
      this.projectTimeLists = this.getBackUpProjectLists();
      this.projectTimeLists = this.projectTimeLists.filter((project) => {
        return (project.F_Name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) != -1);
      });
  }

【讨论】：