Angularjs jQuery用户界面自动完成 [英] Angularjs jquery UI autocomplete
问题描述
我想实现在角度指令jQuery的自动完成功能。这些数据我收到了源从WebSocket的反应来。它不工作，我想响应延迟在此导致了问题。
我将AP preciate如果有人能阐明低于code的一些情况。是否有任何优雅的技术来实现这个使用某种请求/响应或承诺？
app.directive（自动完成，函数（$ rootScope，locationAutoCompleteService，$超时，$ HTTP，programLocationModel）{
返回{
限制：'A'， 范围： { 的serviceType：@serviceType
}， 链接：功能（范围，ELEM，ATTR，CTRL）{ 变种autoItem = []; scope.change =功能（）{ locationAutoCompleteService.unSubscribe（）; 变种服务= locationAutoCompleteService.getServiceDefinition（）; service.filters.pattern = scope.inputVal; locationAutoCompleteService.subscribe（）; }; 范围。在$（'myData的'，函数（事件，消息）{ 如果（消息== NULL和放大器;！＆安培;！message.results == NULL）{ autoItem = []; 对于（VAR I = 0; I＆LT; message.results.length;我++）{ autoItem.push（{标签：message.results [I] .name和ID：message.results [I] .ID}）;
} } }）; elem.autocomplete（{ 来源：autoItem，
选择：函数（事件，UI）{ $超时（函数（）{ elem.trigger（'输入'）; }，0）; }
}）;
}
};
}）;
您总是可以利用这些家伙所做的工作： HTTP： //angular-ui.github.io/bootstrap
-Scroll下降到预输入 -
下面是一个Plunkr：<一href=\"http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=$p$pview\">http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=$p$pview
下面是一些标记：
HTML
＆LT; DIV CLASS ='集装箱液'NG控制器=TypeaheadCtrl＆GT;
＆LT; pre＆GT;产品型号：{{选择| JSON}}＆LT; / pre＆GT;
＆LT;输入类型=文本NG模型=选择预输入=状态状态状态|过滤器：$ viewValue＆GT;
＆LT; / DIV＆GT;
JS
函数TypeaheadCtrl（$范围）{ $ scope.selected =不确定;
$ scope.states = ['阿拉巴马'，'阿拉斯加，亚利桑那，阿肯色州，加州，科罗拉多，康涅狄格，特拉华州，佛罗里达，乔治亚，夏威夷， 爱达荷，伊利诺伊州，夺宝，衣阿华，堪萨斯州，肯塔基州，路易斯安那州，缅因，马里兰，马萨诸塞州，密歇根州，明尼苏达州，密西西比'，'密苏里'，'蒙大拿州，内布拉斯加州，内华达州，新罕布什尔，新泽西，新墨西哥，纽约，北达科他州，北卡罗来纳，俄亥俄州，俄克拉荷马，俄勒冈州，宾夕法尼亚州，罗得岛，南卡罗来纳，南达科他州，田纳西州，得克萨斯，爵士，佛蒙特州'，'弗吉尼亚'，'华盛顿，西弗吉尼亚州，威斯康星，怀俄明州'];
}
更新
好像我是在错误的问题集中。尝试移动 $关于处理程序中的自动完成呼叫。
这样的：
app.directive（自动完成，函数（$ rootScope，locationAutoCompleteService，$超时，$ HTTP，programLocationModel）{
返回{
限制：'A'，
范围： {
的serviceType：@serviceType
}，
链接：功能（范围，ELEM，ATTR，CTRL）{
变种autoItem = [];
scope.change =功能（）{
locationAutoCompleteService.unSubscribe（）;
变种服务= locationAutoCompleteService.getServiceDefinition（）;
service.filters.pattern = scope.inputVal;
locationAutoCompleteService.subscribe（）;
};
范围。在$（'myData的'，函数（事件，消息）{
如果（消息== NULL和放大器;！＆安培;！message.results == NULL）{
autoItem = [];
对于（VAR I = 0; I＆LT; message.results.length;我++）{
autoItem.push（{
标签：message.results [I] .name和
ID：message.results [I] .ID
}）;
}
elem.autocomplete（{
来源：autoItem，
选择：函数（事件，UI）{
$超时（函数（）{
elem.trigger（'输入'）;
}，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);
}
});
}
};
});
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);
}
});
}
});
}
};
});
这篇关于Angularjs jQuery用户界面自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
