Ionic search bar does not search until the keyboard is hidden

问题

I have a search bar in my Ionic app that I would like to use to filter/search through a list. Whenever I type in the search bar, in the background, the filtering is already happening but it doesn't show on the screen until I click the arrow down to hide the keyboard. Let me clarify by showing the following pictures:

This is a picture of the list before I start to search:

This is a picture of me trying to search for "abc". Now, code behind, the searching has already happened but it has not yet been shown. (which is what I want, I want to search on every keystroke)

Only after clicking the arrow down button from above image, the "filtered/searched" results are shown.

HTML:

<ion-content padding>

    <ion-list>

        <div *ngFor="let period of periodsClone; let j = index">
            <ion-item-divider>{{ period.month | monthNameFormat }} {{ period.year }}
                <div item-end><b>€{{ period.sum |  number : '1.2-2' }}</b></div>
            </ion-item-divider>
            <div *ngFor="let declaration of period.declarations;let i = index;">
                <button ion-item text-wrap detail-none (click)="openDeclaration(period.number,declaration.id);">

                        <ion-icon item-start style="color: grey;" name="time" *ngIf="declaration.status == '1';"></ion-icon>
                        <ion-icon item-start style="color: red;" name="close" *ngIf="declaration.status == '2';"></ion-icon>
                        <ion-icon item-start style="color: lightgreen;" name="checkmark" *ngIf="declaration.status == '3';"></ion-icon>

                        <h2>{{ declaration.name }}</h2>
                        <p>{{ declaration.date | date:'dd-MM-yyyy' }}</p>
                        <p style="color: red;">{{ declaration.comment }}</p>
                        <div item-end>€ {{ declaration.amount | number : '1.2-2'}}</div>
                    <ion-icon name="arrow-forward" item-end></ion-icon>
                </button>
            </div>
            <br>
            <br>
        </div>

    </ion-list>

</ion-content>


<ion-footer>
    <ion-searchbar [(ngModel)]="searchInput" (ionInput)="search($event)">
    </ion-searchbar>
</ion-footer>

Typescript:

search(ev){
    this.periodsClone = this.periods.map(x => JSON.parse(JSON.stringify(x)));

    let value = ev.target.value.toLowerCase();

    for (let i = 0; i < this.periodsClone.length; i++) { 
      for (let j = 0; j < this.periodsClone[i].declarations.length; j++) { 
        let toRemove = false;
        (this.periodsClone[i].declarations[j].name.toLowerCase().includes(value) || this.periodsClone[i].declarations[j].description.toLowerCase().includes(value) ? toRemove = false : toRemove = true);
        (toRemove ? (this.periodsClone[i].declarations.splice(j,1) , j = 0) : false);
      }
    }

  }

And:

private periods: Period[] = [];
private periodsClone: Period[] = [];
private searchInput: string;

And:

  ionViewWillEnter() {
    this.periods = this.declarationService.getPeriods();
    this.periodsClone = this.declarationService.periodsDuplicate;
  }

How do I search immediately when I enter a character in the search field?

PS: This problem occurs on my Nexus 6 but also on my Huawei P10 (exactly the same)

EDIT:

I am still stuck on this problem, in the meantime I have changed my code for the search function a bit:

search(event) {
    this.periodsClone = this.periods.map(x => JSON.parse(JSON.stringify(x)));
    let value = event.target.value.toLowerCase();

    if (value != '') {

      this.periodsClone = this.periodsClone.filter((period) => {
        return (
          period.declarations.filter((declaration) => {
            return (
              declaration.name.toLowerCase().includes(value) ||
              declaration.description.toLowerCase().includes(value)
            )
          }).length > 0
        )

      })
    }

    console.log(this.periodsClone);
  }

Period:

//Entities
import { Declaration } from './declaration.entity';

export class Period {
    constructor(
        public id: number,
        public status: string,
        public year: number,
        public month: number,
        public sum: number,
        public orderNumber: string,
        public userId: string,
        public submitDate: Date,
        public comment: string,
        public declarations: Declaration[]
    ) { }
}

Declaration:

//Entities
import { FileCustom } from './file.entity';
import { Period } from './period.entity';
import { Project } from './project.entity';

export class Declaration {
    constructor(
        public id: number,
        public status: string,
        public name: string,
        public description: string,
        public amount: number,
        public date: Date,
        public period: Period,
        public userId: string,
        public files: FileCustom[],
        public comment: string,
        public project: Project
    ) { }

}

The problem as of now is that I cannot reproduce the problem, because sometimes I don't get it and sometime's I do get it. I have captured both occasions:

Video of working example

Video of not working example

EDIT 2:

I also tried to use a normal input for this like this:

<ion-input (keyup)="search($event)" placeholder="Zoeken" clearInput></ion-input>

But that results in the same exact problem.

回答1:

So I figured out (thanks to the Ionic Slack) what the problem was. Angular did not always detect changes the way I did this. I could either create a new instance of the periods list (so changes would be detected) or force changes to be detected (manually). I did the latter:

Import:

import { ChangeDetectorRef } from '@angular/core';

Constructor:

private cd: ChangeDetectorRef

At the end of the search function:

this.cd.detectChanges();

This way, it always works.

来源：https://stackoverflow.com/questions/48319166/ionic-search-bar-does-not-search-until-the-keyboard-is-hidden