从自定义源+ angular.js jquery的自动完成 [英] jquery autocomplete from custom source + angular.js
问题描述
我是新来angular.js和jQuery。试图实现从具有名字和电子邮件对象数组的自定义源自动完成。用户将输入的名称，将显示在自动完成下拉匹配的名字。当用户选择一个名字对应的邮件将被填充在自动完成框。
I am new to angular.js and jquery. Was trying to implement autocomplete from custom source consisting of an array of objects having names and emails. User will enter name and will be shown matching names in the autocomplete dropdown. When user selects one name the corresponding email will be filled in the autocomplete box.
我曾尝试以下，但它不工作。
I have tried the following but it doesn't work.
<body ng-controller='FriendController'>
<form ng-submit="addFriend()">
<input type="email" auto-complete ui-items="fbFriends" ng-model="friend" autofocus />
</form>
<ul ng-repeat="friend in friends">
<li>
{{friend.text}}
</li>
</ul>
<script>
var addFriendAppModule = angular.module('addFriendApp', []);
addFriendAppModule.controller('FriendController',
function($scope) {
var friendArr = [];
$scope.fbFriends = [
{
name: "manu",
email: "sept@gmail.com"
},
{
name: "manu123",
email: "sept123@gmail.com"
}
];
$scope.friends = friendArr;
$scope.friend = '';
$scope.addFriend = function() {
var newFriend = $scope.friend.trim();
if (newFriend.length === 0) {
return;
}
friendArr.push(
{text: newFriend}
);
};
});
addFriendAppModule.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
focus: function(event,ui) {
iElement.val(ui.item.email);
return false;
},
select: function(event, ui) {
iElement.val(ui.item.email);
return false;
// iElement.trigger('input');
// iElement.trigger('submit');
}
}).data("ui-autocomplete")._renderItem = function(ui, item) {
return $("<li></li>")
.append(item.email)
.appendTo(ul);
};
}
});
</script>
推荐答案
我知道这是一个老帖子，但我可以提出申请。
在根据_renderItem部分中的自动完成指令，进行以下更改：
I know this is an older post, but I was able to make application. In your autoComplete directive under the _renderItem section, make the following changes:
//Change this:
.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data( "item.autocomplete", item )
.append(item.email)
.appendTo(ul);
};
//to:
.data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.attr( "data-value", item.email )
.append( $( "<a>" ).text(item.email))
.appendTo(ul);
};
通知，自动完成到UI的自动完成功能的变化，以及.append部分包裹
Notice the change from autocomplete to ui-autocomplete, and the .append section wrapping the
这篇关于从自定义源+ angular.js jquery的自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
