So verwenden Sie jQuery Autocomplete, um einen bestimmten Datensatz zu durchsuchen, ohne die in das Eingabefeld eingegebenen Bestellworte zu verwenden

Question

Ich verwende jQuery Autocomplete in meinem Angular 2 rc4.

Meine Html ist <input class="search" id="search-input" type="text" name="search-input" placeholder="Search by keyword, lesson or standard" #searchResult1 [(ngModel)]="completeMe"/>

in .ts

heroes:any=[]; 
this.heroes.push(
{ 
    "id": "1", 
    "label": "This is example text" 
}); 
this.heroes.push(
{ 
    "id": "2", 
    "label": "This is result text" 
}); 
jQuery('#search-input') 
    .autocomplete({ 
    source:this.heroes, 
    minLength: 2, 
}); 

Ergebnis :: Datei Als ich eintrat bin in i/p-Box 'das ist', dann beide Ergebnis in li-Tag anhängen wird. und wenn ich 'dieses Ergebnis' eingib, wird nichts angezeigt oder an li Tag angehängt.

Erwartetes Ergebnis: Wenn ich 'this result' oder 'result this' eintrage, dann sollte 'this is result text' in li tag angefügt werden, wobei die Reihenfolge des eingegebenen Textes ignoriert wird.

Derzeit ist es nur die Wiedergabe der genauen Übereinstimmung aus dem Satz. aber ich wollte die Reihenfolge der Wörter ignorieren.

Bitte Hilfe.

Answer 1

So etwas sollte es tun:

jQuery('#search-input') 
    .autocomplete({ 
    source: (request, response) => { 
     const val = '^(?=.*\\b' + request.term.trim().split(/\s+/).join('\\b)(?=.*\\b') + ').*$' 
     const matcher = RegExp(val, 'i') 

     response(this.heroes.filter(item => matcher.test(item.label))); 
    }, 
    minLength: 2, 
    }); 

Beachten Sie auch, Sie nicht jQuery('#search-input') verwenden sollten, sollten elementRef.nativeElement der entsprechenden Komponente oder Abfrage DOM innerhalb dieser Komponente verwendet wird, aber nicht global wie Sie jetzt tun.