2016-04-21 1 views
1

J'ai une zone de texte où l'utilisateur va taper le nom de sa région et je lui ai montré quelques options en fonction de sa saisie. Je fais un appel api pour obtenir les données possibles. L'API est écrite dans nodejs. J'utilise bootstrap.typeahed pour montrer les suggestions possibles. Je fais l'appel api chaque fois que l'utilisateur tape une lettre. Ceci est fait mais je suis confronté à un problème si l'utilisateur tape très vite. Ensuite, les appels api ne retournent pas dans le même ordre que celui dans lequel ils ont été appelés, donc l'utilisateur voit parfois des données erronées. Comment éviter cela? En mode angulaire, puis-je rejeter un appel api si un api ultérieur est déjà terminé?Afficher les suggestions dans une zone de texte dans angularjs

+1

question Assez commun, essayez de retarder la mise à jour de votre modèle ng par debouncing à l'aide d'options ng-modèle. Voici la documentation - https://docs.angularjs.org/api/ng/directive/ngModelOptions –

Répondre

2

Utilisez le ng-model-options et régler le debounce d'appeler le api sur temporisation. Si quelqu'un tape rapidement, il saisira plus d'une lettre et à une vitesse plus lente, une lettre à la fois. Cela donnera une goutte d'espace donc il n'y a pas de confusion. Si le délai est court, il se déplacera en douceur sans délai notable.


Ajoutez ceci à attribuer à votre élément
ng-model-options="{ debounce: 400 }"

+0

On dirait qu'il a amélioré la solution. Merci. – decon

+0

@decon s'il vous plaît marquer comme réponse correcte si cela a aidé. merci –

+0

Oui sûr. Merci de votre aide. – decon

2

Essayez ng-model-options pour ajouter un délai lorsque le modèle change.

<input ng-model="model" ng-model-options="{updateOn: 'default blur', debounce: { 'default': 700, 'blur': 0 }}"></input> 
+0

Merci pour votre réponse. – decon