Javascript jquery从自定义源自动完成+；angular.js_Javascript_Jquery_Angularjs_Angularjs Directive_Angular Ui

Javascript jquery从自定义源自动完成+；angular.js

javascript jquery angularjs

Javascript jquery从自定义源自动完成+；angular.js,javascript,jquery,angularjs,angularjs-directive,angular-ui,Javascript,Jquery,Angularjs,Angularjs Directive,Angular Ui,我是angular.js和jquery的新手。正在尝试从自定义源实现自动完成，该自定义源由具有名称和电子邮件的对象数组组成。用户将输入名称，并在“自动完成”下拉列表中显示匹配的名称。当用户选择一个名称时，相应的电子邮件将填写在自动完成框中我试过以下方法，但不起作用 <body ng-controller='FriendController'> <form ng-submit="addFriend()"> <input type="email" auto-c

我是angular.js和jquery的新手。正在尝试从自定义源实现自动完成，该自定义源由具有名称和电子邮件的对象数组组成。用户将输入名称，并在“自动完成”下拉列表中显示匹配的名称。当用户选择一个名称时，相应的电子邮件将填写在自动完成框中

我试过以下方法，但不起作用

<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>




{{friend.text}


var addFriendAppModule=angular.module（'addFriendApp'，[]）；
addFriendAppModule.controller（'FriendController'，
职能（$范围）{
var-friendArr=[]；
$scope.fbFriends=[
{
名称：“马努”，
电子邮件：“sept@gmail.com"
},
{
名称：“manu123”，
电子邮件：“sept123@gmail.com"
}
];
$scope.friends=friendArr；
$scope.friend=''；
$scope.addFriend=函数（）{
var newFriend=$scope.friend.trim（）；
if（newFriend.length==0）{
返回；
}
友军推(
{text:newFriend}
);
};      
});
addFriendAppModule.directive（'autoComplete'，函数（$timeout）{
返回功能（范围、IELENT、iAttrs）{
自动完成({
来源：范围[iAttrs.uiItems]，
焦点：功能（事件、用户界面）{
iElement.val（ui.item.email）；
返回false；
},
选择：功能（事件、用户界面）{
iElement.val（ui.item.email）；
返回false；
//iElement.trigger（'input'）；
//iElement.trigger（“提交”）；
}
}).data（“ui自动完成”）。\u renderItem=函数（ui，项）{
返回$（“”）
.append（item.email）
.附录（ul）；
};
}
});

需要在对象数组中用值替换名称，在renderItem中，函数参数应该是ul，item，而不是ui，item

<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 = [
            {
            value: "manu", 
            email: "sept@gmail.com"
            },
            {
            value: "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("autocomplete")._renderItem = function(ul, item) {
                return $("<li></li>")
                    .data( "item.autocomplete", item )
                    .append(item.email)
                    .appendTo(ul);
            };
        }
    });



</script>




{{friend.text}


var addFriendAppModule=angular.module（'addFriendApp'，[]）；
addFriendAppModule.controller（'FriendController'，
职能（$范围）{
var-friendArr=[]；
$scope.fbFriends=[
{
值：“manu”，
电子邮件：“sept@gmail.com"
},
{
值：“manu123”，
电子邮件：“sept123@gmail.com"
}
];
$scope.friends=friendArr；
$scope.friend=''；
$scope.addFriend=函数（）{
var newFriend=$scope.friend.trim（）；
if（newFriend.length==0）{
返回；
}
友军推(
{text:newFriend}
);
};      
});
addFriendAppModule.directive（'autoComplete'，函数（$timeout）{
返回功能（范围、IELENT、iAttrs）{
自动完成({
来源：范围[iAttrs.uiItems]，
焦点：功能（事件、用户界面）{
iElement.val（ui.item.email）；
返回false；
},
选择：功能（事件、用户界面）{
iElement.val（ui.item.email）；
返回false；
//iElement.trigger（'input'）；
//iElement.trigger（“提交”）；
}
}).数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“”）
.data（“item.autocomplete”，item）
.append（item.email）
.附录（ul）；
};
}
});

我知道这是一篇较老的帖子，但我能够申请。在_renderItem部分下的autoComplete指令中，进行以下更改：

//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);
        };

//更改此选项：
.数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“”）
.data（“item.autocomplete”，item）
.append（item.email）
.附录（ul）；
};
//致：
.data（“ui自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“”）
.attr（“数据值”，item.email）
.append（$（“”）.text（item.email））
.附录（ul）；
};

请注意从autocomplete到ui autocomplete的更改，以及包装a href中

项的.append部分。我遵循了上面的示例，这就是我如何让它为我工作的原因。

您是否查看了angularjs ui typeahead？nup现在会试试。。。谢谢与此同时，你看到我的代码片段中的问题了吗？嘿，它开始工作了。。需要在对象数组和_renderItem中用值替换名称，函数参数应该是ul，item，而不是ui，item…但是现在有更多的问题。。当我尝试使用箭头键滚动列表时，我会发现更多错误…现在有更多问题。。。在下拉列表中，当我尝试使用箭头键滚动并选择一个条目时，我得到以下错误。。。SCRIPT5007:无法获取未定义或空引用的属性“top”