Ionic 3中文搜索栏

Question

I'm working to build a search bar to able filter the items based on its chinese name inserted. Now I'm able to search based on its english name rather than chinese language.

How should I work on chinese text searching?

Output:

Source Code: (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> 

(Filter Function) in English on fd.name properties

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
      })
    }

Should I change the fd.name properties into fd.chinese name?

Answer 1

if you wanna search with Chinese text, you must use the original list first, because when you start search, the code executes twice, first search text form is Pinyin, and then Chinese text. if you don't recover the list, you cannot get the result filter. for example:

 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);
      });
  }