Comment lier le typeahead d'angular-ui avec un serveur via $http pour une optimisation côté serveur ?

Question

L'exemple de typeahead ( http://angular-ui.github.io/bootstrap/#/typeahead ) mentionne qu'il est facile d'implémenter un back-end dans cette autocomplétion, mais ne donne aucun exemple. Ce qui m'intéresse en particulier, c'est de connaître la chaîne de caractères actuellement saisie afin de pouvoir envoyer que Je voudrais faire cette optimisation côté serveur et minimiser mes requêtes. Je ne pense pas qu'il soit possible de renvoyer l'ensemble des résultats et d'exclure les éléments qui ne correspondent pas à l'affichage pour une application qui a plus de 200 000 entrées dans la base de données.

Dois-je, dans ce cas, oublier complètement typeahead et mettre en place une solution personnalisée avec une liste déroulante, ou existe-t-il un moyen de le faire facilement ?

Answer 1

Il existe un moyen de mettre cela en œuvre très facilement, sans qu'il soit nécessaire de déployer votre solution personnalisée (du moins pas dans ce cas !). Fondamentalement, vous pouvez utiliser n'importe quelle fonction comme partie de l'expression de typeaheads, par ex :

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

Comme vous pouvez le voir dans cet exemple, l getStates($viewValue) (définie sur une portée) peut être appelée et la méthode $viewValue correspond à une valeur saisie par un utilisateur.

Ce qui est le mieux ici, c'est que votre fonction peut retourner une promesse et cette promesse sera correctement reconnue par le typeahead.

Il y a quelques temps, j'ai écrit un exemple de plunk qui montre comment utiliser des appels côté serveur pour fournir une auto-complétion. Regardez ce plunk qui montre l'autocomplétion pour toutes les villes des Etats-Unis (basé sur geobytes.com), où les villes sont interrogées en direct depuis un service JSONP :

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

Vous y trouverez un exemple concret de filtrage côté serveur (vous devez taper au moins 3 caractères pour voir les résultats). Bien sûr, vous n'êtes pas limité aux appels jsonp, vous pouvez utiliser n'importe quelle méthode retournant une promesse.

Answer 2

Je n'ai pas le droit de commenter, alors je le poste comme une réponse (désolé !).

Si vous utilisez une version plus récente de bootstrap, vous devez ajouter uib- devant typeahead (comme suit)

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