Come collegare il typeahead di angular-ui con un server tramite $ http per l'ottimizzazione lato server?

Question

L'esempio typeahead (http://angular-ui.github.io/bootstrap/#/typeahead) indica che è facile implementare un back-end in questo completamento automatico, ma non fornisce alcun esempio. Quello che mi interessa in particolare è trovare la stringa attualmente inserita in modo che io possa inviare che al server e inviare un risultato già filtrato - Mi piacerebbe fare questa ottimizzazione lato server e ridurre al minimo le mie query, non lo faccio pensa di restituire l'intero set di risultati e di escludere solo gli elementi non corrispondenti per la visualizzazione è fattibile per un'app con oltre 200.000 voci nel database.

In questo caso, in questo caso, dimenticarsi completamente di typeahead e implementare una soluzione personalizzata con un menu a discesa, oppure esiste un modo per farlo facilmente?

Answer 1

C'è un modo per implementare questo molto facilmente, senza bisogno di distribuire la soluzione personalizzata (almeno non per questo caso!). Fondamentalmente si può usare qualsiasi funzione come parte dell'espressione typeaheads, es .:

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

Come si può vedere da questo esempio il metodo getStates($viewValue) (definito su una portata) può essere chiamato ed il $viewValue corrisponde ad un valore immesso da un utente.

Qual è il migliore qui è che la funzione può restituire una promessa e questa promessa verrà correttamente riconosciuta dal typeahead.

Qualche tempo fa ho scritto un plunk campione che mostra come utilizzare le chiamate lato server per fornire il completamento automatico. Controllare questo Plunk che mostra completamento automatico per tutte le città negli Stati Uniti (sulla base di geobytes.com), in cui le città vengono interrogati in diretta da un servizio JSONP:

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

Controllare fuori per un esempio di lavoro su come fare filtraggio sul lato server (è necessario digitare almeno 3 caratteri per vedere i risultati). Ovviamente non sei limitato alle chiamate jsonp, puoi usare qualsiasi metodo per restituire una promessa.

Answer 2

non abbiamo il rappresentante di commentare in modo distacco come una risposta (scusate!)

Se si utilizza una versione più recente di bootstrap è necessario aggiungere uib- davanti typeahead (in questo modo)

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