javascript Angularjs jquery UI 自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17432258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs jquery UI autocomplete
提问by Gurpreet Singh
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.
我正在尝试在 Angular 指令中实现 jquery 的自动完成功能。我收到的源数据来自 websocket 响应。它不起作用，我认为响应延迟导致了这里的问题。
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);
}
});
}
};
});
回答by Brian Lewis
You could always leverage the work these guys have done: http://angular-ui.github.io/bootstrap
你总是可以利用这些人所做的工作：http: //angular-ui.github.io/bootstrap
-Scroll down to typeahead-
-向下滚动以提前输入-
Here is a Plunkr: http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview
这是一个 Plunkr：http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview
Here is some markup:
这是一些标记：
HTML
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
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 $onhandler.
似乎我专注于错误的问题。尝试在$on处理程序内移动自动完成调用。
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);
}
});
}
});
}
};
});
