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: "[email protected]"
},
{
name: "manu123",
email: "[email protected]"
}
];
$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>
