0

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

4

2 回答 2

0

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

注意从 autocomplete 到 ui-autocomplete 的变化，以及 .append 部分包裹

  • href 中的项目。我在按照上面的示例进行操作，这就是我让它为我工作的方式。

    • 于 2014-02-21T15:56:01.037 回答
    0

    需要用对象数组中的值替换名称，并且在 _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>
    于 2013-06-30T01:57:36.073 回答