Currently, I am setting up a search functionality. Whenever a user inputs a character into the search box, I use the ng-change event to call an API, retrieve the model, and bind it to uib-typeahead. My goal is for uib-typehead to immediately start suggesting options based on the characters already entered in the input box, similar to how Google's autocomplete feature works. However, instead of initiating suggestions as soon as the model is bound, it waits for the next character before triggering the event.
Please Note: I have set the API to stop fetching data after 2 characters are entered.
Here is the input code snippet:
<input id="tbSearchBox" name="tbSearchBox" type="text" ng-model="selected" ng-change="keyPressed()" uib-typeahead="x.x for x in securities | filter:$viewValue | limitTo:8" typeahead-on-select="selectedSecurity($item, $model, $label)">In the above code snippet, the ng-change directive captures text changes and triggers the API call to fetch the model.
I have searched the web for various solutions such as displaying suggestions on focus or button click, but none of them trigger post-model binding. While there may be some workaround hacks available, I am looking for the best solution that is purely Angular-centric. I prefer avoiding the use of jQuery specifically for this scenario.
Thanks In Advance