Suche auf Taste nach oben statt des Schlagens eingeben

Question

Ich habe dieses Rohr für die Suche

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'searchPipe', 
    pure: false 
}) 
export class SearchPipe implements PipeTransform { 

    transform(data: any[], search: string): any[] { 
    if (data == null){ 
     return null; 
    } 

    search = search.toUpperCase(); 
    return data.filter(x => { 
     return (x.firstName.toUpperCase().indexOf(search) !== -1) 
... 
    }); 
    } 

} 

und in component.html Ich habe

<input #input type="text" placeholder="Search" id="search"> 

<ul class="list-group"> 
    <li *ngFor="let dt of data | searchPipe: input.value" class="list-group-item"> 
    <div class="col-sm-3 col-xs-12 clearfix"> 

     <span>{{ dt.firstName }} {{ dt.lastName }}</span> 

    </div> 
    <div class="clearfix"></div> 
    </li> 
</ul> 

Suche funktioniert OK, aber nur wenn ich auf zu eingeben oder Rücktaste, aber stattdessen möchte ich bei jedem Tastendruck (für a, b etc.) suchen

Wie kann ich das tun?

Answer 1

Bind Eingabefeld mit einer Eigenschaft in Ihrer Komponente mit [NgModel] und verwenden, die als Filter statt input.value

In Ihrer Komponente, erstellen Sie eine Eigenschaft

public searchText: string; 

und verwenden Sie es in wie dieses in Ihrem html

Answer 2

Nicht sicher, aber Problem könnte mit #input Vorlagevariable sein. Sie könnten [(ngModel)] statt, wie unten gezeigt,

<input type="text" [(ngModel)]="myValue" placeholder="Search" id="search"> 
... 
<li *ngFor="let dt of data | searchPipe: myValue" class="list-group-item"> 
... 
... 

Jetzt verwenden, wie Sie schreiben, sollte es das Ergebnis aktualisieren.