Mukesh Kumar Mukesh Kumar - 1 year ago 315
Javascript Question

How to make angular uib-typeahead to show suggestions immediately after binding the model?

I'm implementing a search here. When user enters a character in input box, on ng-chanage event I hit the api, get the model and bind it to uib-typehead. Now I want when I bind the model uib-typehead should immediately start suggesting options for the already entered characters in the input box. Instead of this it waits for the next character so that event could be triggered.

Note: I stop hitting the API after entering 2 characters.

Input code

<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 above code ng-change is allowing me to capture the event whenever the text is changed and hit the API to get the model.

I checked web for various solution like show suggestions on focus or button click but none of them is post model binding trigger. There could be some hack but I want the best one and purely angular oriented. Don't wanna use jQuery jsut for this situation.


Answer Source

I've been seeking for the answer however there was not any direct solution. I somehow managed to find a trick here to get it done. Programmatically by making enter/click on which the event triggers for textbox, it is working.

$scope.$watch("securities", function () {

Now whenever the model changes it adds trigger which server the purpose.