Question

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

Answer 1

需要将name替换为对象数组中的值，而在_renderItem中，函数params应该是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>

Answer 2

我知道这是一篇较旧的帖子，但我能够提出申请。在_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);
        };

注意从自动完成到ui-autocomplete的更改，以及在href中包装

项目的.append部分。我跟着你上面的例子，这就是我为我工作的方式。

来自自定义源+ angular.js的jquery自动完成

2 个答案: