2

tag-it jQuery プラグインを使用しています。次に、見つかった各アイテムの結果をカスタマイズする必要があります。見つかったアイテムのラベルの左側に画像 (ユーザー アバター) を追加するだけです。

tag-it.js ファイルを含めましたが、上記の問題以外は問題なく動作します。

ここに私のコードのスニペットがあります:

$("#searchForUsersAutocomplete").tagit({
        tagSource: function(search, showChoices) {
            findUsers(search.term, function(jsonFoundUsers, status)//externall API-call which returns list of users as Objects (jsonFoundUsers)
            {
                var users = new Array();
                for (var i = 0; i < jsonFoundUsers.users.length; i++)
                {
                  //users.push(jsonFoundUsers.users[i].userAvatar);//contain an image (user avatar). Where can I place it in order to render in autocomplete search result? 
                  users.push(jsonFoundUsers.users[i].username);//populating users array which consists of "username" of each users
                }

                showChoices(users);
            });
        },
        removeConfirmation: true,
    });

各アイテムに画像（ユーザーアバター）を追加するためにtag-it.jsファイルを調整できるとは思いませんでしたが、できる場所が見つかりません。（私はすでに同じ質問を見ました）

最終結果は次のようになります

誰でも私を助けることができますか？どんな努力も大歓迎です。ありがとう。

4

2 に答える 2

0

私は解決策を見つけました。たぶん、この答えは誰かに役立つでしょう。

主なアイデアはmonkeyPatchAutocomplete パッチを適用することです:

monkeyPatchAutocomplete();

    function monkeyPatchAutocomplete()
    {
        $.ui.autocomplete.prototype._renderItem = function(ul, item) {
            var regexp = new RegExp(this.term);
            var highlightedVal = item.label.replace(regexp, "<span style='font-weight:bold;color:Blue;'>" + this.term + "</span>");
            return $("<li'></li>")
                    .data("item.autocomplete", item)
                    .append("<a><img class='autocompleteUserAvatar' src='" + item.icon + "' />" + highlightedVal + "</a>")
                    .appendTo(ul);
        };
    }
    var users;
    $("#searchForUsersAutocomplete").tagit({
        allowDuplicates: false,
        removeConfirmation: true,
        tagSource: function(search, showChoices) {
            findUsers(search.term, function(jsonFoundUsers, status)//ajax-call to an externall server API
            {
                users = new Array();
                for (var i = 0; i < jsonFoundUsers.users.length; i++)
                {
                    var user =
                            {
                                value: jsonFoundUsers.users[i].username,
                                label: jsonFoundUsers.users[i].username,
                                icon: jsonFoundUsers.users[i].avatarUrl
                            };
                    users.push(user);
                }
                showChoices(users);
            });
        }
    });
于 2013-09-11T16:05:20.613 に答える
0

この問題に対処する別の Github プロジェクト、Image Selectを次に示します。これは、非常に人気のある JQuery プラグインであるChosenに基づいて構築されています。

于 2014-01-02T18:10:04.327 に答える