Comment lier la typeahead de angular-ui à un serveur via $ http pour une optimisation côté serveur?
L'exemple typeahead ( http://angular-ui.github.io/bootstrap/#/typeahead ) indique qu'il est facile d'implémenter un back-end dans cet autocomplétant, mais ne fournit aucun exemple. Ce qui m'intéresse en particulier, c'est de trouver la chaîne actuellement saisie pour pouvoir envoyer le message au serveur et renvoyer un résultat déjà filtré - j'aimerais Pour faire cette optimisation côté serveur et minimiser mes requêtes, je ne pense pas qu'il soit possible de renvoyer l'intégralité du jeu de résultats et d'exclure les éléments ne correspondant pas à l'affichage pour une application comportant plus de 200 000 entrées dans la base de données.
Devrais-je, dans ce cas, oublier complètement le typeahead et implémenter une solution personnalisée avec une liste déroulante, ou y a-t-il un moyen de le faire facilement?
Il existe un moyen de mettre cela en œuvre très facilement, pas besoin de déployer votre solution personnalisée (du moins pas pour ce cas!). En gros, vous pouvez utiliser n’importe quelle fonction dans l’expression typeaheads, ex .:
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
Comme vous pouvez le voir dans cet exemple, la méthode getStates($viewValue) (définie sur une étendue) peut être appelée et le $viewValue Correspond à une valeur entrée par un utilisateur.
Le meilleur ici est que votre fonction peut renvoyer une promesse et que cette promesse sera correctement reconnue par la tête de frappe.
Il y a quelque temps, j'ai écrit un exemple de dalle qui explique comment utiliser les appels côté serveur pour effectuer l'auto-complétion. Cochez cette case qui affiche la saisie semi-automatique pour toutes les villes des États-Unis (basées sur geobytes.com), où les villes sont interrogées en direct à partir d'un service JSONP:
http://plnkr.co/edit/t1neIS?p=preview
Découvrez un exemple de travail sur la manière de filtrer 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 pour retourner une promesse.
Ne pas avoir le représentant à commenter, donc poster comme réponse (désolé!)
Si vous utilisez une version plus récente de bootstrap, vous devez ajouter uib- devant le typeahead (comme si)).
<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">