0

angular.js と jquery は初めてです。名前と電子メールを持つオブジェクトの配列で構成されるカスタム ソースからオートコンプリートを実装しようとしていました。ユーザーが名前を入力すると、一致する名前がオートコンプリート ドロップダウンに表示されます。ユーザーが 1 つの名前を選択すると、対応する電子メールがオートコンプリート ボックスに入力されます。

以下を試してみましたが、うまくいきません。

<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 では、関数のパラメーターは ui,item ではなく ul,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 に答える