Wie man angular-ui typeahead mit einem Server über $ http für serverseitige Optimierung bindet?

Question

Das typeahead-Beispiel (http://angular-ui.github.io/bootstrap/#/typeahead) erwähnt, dass es einfach ist, ein Backend in diese Autocomplete zu implementieren, bietet aber kein Beispiel. Was mich besonders interessiert ist herauszufinden, die derzeit eingegebene Zeichenfolge, so dass ich senden kann, dass an den Server und senden Sie ein bereits gefiltertes Ergebnis zurück - Ich möchte diese Optimierung Server-Seite tun und minimieren meine Abfragen, ich nicht Ich denke, dass die Rückgabe des gesamten Ergebnissatzes und das Ausschließen nicht übereinstimmender Elemente zur Anzeige für eine App mit mehr als 200.000 Einträgen in der Datenbank möglich ist.

Soll ich in diesem Fall überhaupt Type-Ahead vergessen und eine benutzerdefinierte Lösung mit einem Drop-down implementieren, oder gibt es eine Möglichkeit, dies einfach zu tun?

Answer 1

Es gibt eine Möglichkeit, dies sehr einfach zu implementieren, keine Notwendigkeit, Ihre benutzerdefinierte Lösung auszurollen (zumindest nicht für diesen Fall!). Grundsätzlich können Sie jede Funktion als Teil des Ausdrucks typeaheads verwenden, Bsp .:

<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)"> 

Wie Sie aus diesem Beispiel sehen die getStates($viewValue) Methode (definiert auf einem Umfang) aufgerufen werden kann und die $viewValue entspricht einem Wert eingegeben von einem Benutzer.

Was ist das Beste hier ist, dass Ihre Funktion ein Versprechen zurückgeben kann und dieses Versprechen wird korrekt von der Typehead erkannt.

Vor einiger Zeit habe ich ein Beispiel-Plunk geschrieben, das zeigt, wie serverseitige Aufrufe zur automatischen Vervollständigung verwendet werden. Sehen Sie sich diese zupfen, die die automatische Vervollständigung für alle Städte in den USA zeigt (basierend auf geobytes.com), wo Städte live aus einem JSONP Dienst abgefragt werden:

http://plnkr.co/edit/t1neIS?p=preview

Check it out für ein funktionierendes Beispiel auf, wie zu tun Filterung auf der Serverseite (Sie müssen mindestens 3 Zeichen eingeben, um die Ergebnisse zu sehen). Natürlich sind Sie nicht auf Jsonp-Aufrufe beschränkt, Sie können jede Methode verwenden, die ein Versprechen zurückgibt.

Answer 2

Haben die rep nicht so Kommentar als Antwort veröffentlichen (sorry!)

Wenn Sie eine neuere Version von Bootstrap verwenden Sie vor typeahead (wie so)

hinzufügen uib- brauchen

<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">