Search code examples
angularjsnode.jsbootstrap-typeahead

Showing suggestions in a text box in angularjs


I have a text box where user will type his region's name and I have show him some options based on his typing. I am making a api call to get the possible data. The api is written in nodejs. I am using bootstrap.typeahed to show the possible suggestions. I am making the api call whenever the user types a letter. This is done but I am facing a problem if the user is typing very fast. Then the api calls are not returning in the same order they were called, so the user is sometimes seeing wrong data. How to prevent this? In angular can I reject a api call if a later api call is already over?


Solution

  • Use the ng-model-options and set the debounce to call the api on timer expires. If someone is typing quickly, it will capture more than one letter and at a slower pace one letter at a time. This will give a drop of space so there are no mixups. If the delay is a short one, it will move smoothly with no noticable delay.


    Add this to attribute to your element
    ng-model-options="{ debounce: 400 }"