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);

                }
            });
        }
    };
});

Maybe this will help you, written in jquery+angularjs.

SHIVA
– SHIVA

2020-05-25 09:52:11 +00:00
Commented May 25, 2020 at 9:52 — SHIVA
– SHIVA, Commented May 25, 2020 at 9:52

Brian Lewis · Accepted Answer · 2013-07-02 19:51:03Z

14

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);
                        }
                    });
                }
            });
        }
    };
});

edited Jul 2, 2013 at 19:51

answered Jul 2, 2013 at 18:02

Brian Lewis

5,7191 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gurpreet Singh Over a year ago

Thanks for answering, but example you have given is working with static data. The code I pasted works great with static array. I'm having trouble updating array from web socket response.

Brian Lewis Over a year ago

do you have a jsfiddle or plunker?

Brian Lewis Over a year ago

Can you show your service code? I think your problem might be that your app is not aware of the changes from your websocket and is not triggering the watch

Brian Lewis Over a year ago

also, where is myData defined?

Collectives™ on Stack Overflow

Angularjs jquery UI autocomplete

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related