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);
}
});
}
};
});
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 Commented May 25, 2020 at 9:52
1 Answer
Reset to default 14You 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);
}
});
}
});
}
};
});