Angularjs jquery UI autocomplete

Question

I'm trying to implement jquery's autocomplete in an Angular directive. The data I'm receiving for source is coming from websocket response. It's not working and I think response delay is causing the issue here.

I'll appreciate if someone could shed some light on code below. Is there any elegant technique to achieve this using some kind of request/response or promise?

app.directive('autoComplete', function($rootScope, locationAutoCompleteService, $timeout, $http, programLocationModel ) {
    return {
        restrict: 'A',

        scope: {

            serviceType: '@serviceType'
        },

        link: function(scope, elem, attr, ctrl) {

            var autoItem = [];

            scope.change = function () {

                locationAutoCompleteService.unSubscribe();

                var service = locationAutoCompleteService.getServiceDefinition();

                service.filters.pattern = scope.inputVal;

                locationAutoCompleteService.subscribe();

            };

            scope.$on('myData', function(event, message){

                if ( message !== null && message.results !== null) {

                    autoItem = [];

                    for ( var i = 0; i < message.results.length; i++) {

                        autoItem.push({ label: message.results[i].name, id: message.results[i].id });
                    }

                }

            });

            elem.autocomplete({

                source: autoItem,
                select: function( event, ui ) {

                    $timeout(function() {

                        elem.trigger('input');

                    }, 0);

                }
            });
        }
    };
});

Answer 1

You could always leverage the work these guys have done: http://angular-ui.github.io/bootstrap

-Scroll down to typeahead-

Here is a Plunkr: http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview

Here is some markup:

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <pre>Model: {{selected| json}}</pre>
    <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
</div>

JS

function TypeaheadCtrl($scope) {

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
}

Update

It seems like I was focussing on the wrong problem. Try moving the autocomplete call inside the $on handler.

Like this:

app.directive('autoComplete', function($rootScope, locationAutoCompleteService, $timeout, $http, programLocationModel) {
    return {
        restrict: 'A',
        scope: {
            serviceType: '@serviceType'
        },
        link: function(scope, elem, attr, ctrl) {
            var autoItem = [];
            scope.change = function() {
                locationAutoCompleteService.unSubscribe();
                var service = locationAutoCompleteService.getServiceDefinition();
                service.filters.pattern = scope.inputVal;
                locationAutoCompleteService.subscribe();
            };
            scope.$on('myData', function(event, message) {
                if (message !== null && message.results !== null) {
                    autoItem = [];
                    for (var i = 0; i < message.results.length; i++) {
                        autoItem.push({
                            label: message.results[i].name,
                            id: message.results[i].id
                        });
                    }
                    elem.autocomplete({
                        source: autoItem,
                        select: function(event, ui) {
                            $timeout(function() {
                                elem.trigger('input');
                            }, 0);
                        }
                    });
                }
            });
        }
    };
});