Question

过去5天我陷入绝望。我被迫使用ajax接口在自动完成输入中获取用户名。这工作正常，但我也想添加一些用户头像。将头像图像添加到自动填充搜索结果也可以正常工作，但只能直接输入avatar-path而不对_renderItem（）进行ajax响应，如

//see complete code below
var inner_html = '<img src="img/avatar-123.png" /><span>' + item.label + '</span>';

我想操纵第一个ajax JSON结果：

            {"data":[{"label": "Simon",
                    "value":{   "shareType":0,
                                "shareWith":"Simon"
                            }
                }],
         "status":"success"}

就像这样：

{"data":[{  "label": "Simon",
                    "value":{   "shareType":0,
                                "shareWith":"Simon"
                                "avatar":"img/avatar-123.png"
                            }
                }],
         "status":"success"}

但是在json-Object中添加一个新的avatar-Object不起作用:(你有什么想法我做错了吗？

    $("#search").autocomplete({
    minLength: 2,
    focus : function(event, focused) {
        event.defaultPrevented();
    },
    source: function(search, response) {
        $.when(
            //get usernames
            $.get(OC.filePath('core', 'ajax', 'share.php'), {
                fetch : 'getShareWith',
                search : search.term
            })
        /*example result: 
        {"data":[{  "label": "Simon",
                    "value":{   "shareType":0,
                                "shareWith":"Simon"
                            }
                }],
         "status":"success"}*/

         //result of first ajax goes in the next round
        ).then(function(content) {

            $.each(content.data, function(i, item) {
                //get avatars for usernames
                $.get(OC.filePath('ownchat', 'ajax', 'get_avatar.php'), {
                    username: content.data[i].label
                }, function(img) {
                //firebug says everthing is working till here 

                    //now I want to add a new avatar-Object to the json-Object
                    content.data[i].value.avatar = img;
                });
            });

            //the following code-result is empty
                //alert(content.data[0].value.avatar);
            //but calling
                //setTimeout(function(){
                //      response(content.data);
                //  },2000);
            //in place of the following line, it works sometimes 

            response(content.data);

        });
    }/*,
    manipulate search result 
    response: function (e, ui) {

        This do not work too :(

        for(i in ui.content) {
            $.get(OC.filePath('ownchat', 'ajax', 'get_avatar.php'), {
                user_id: ui.content[i].label
            }, function(img) {
                ui.content[i].avatar.push = { avatar: img };
            });
        }
    }*/
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var inner_html = '<img src="'+ item.value.avatar +'" /><span>' + item.label + '</span>';

    return $("<li></li>")
            .data("item.autocomplete", item)
            .append(inner_html)
            .appendTo(ul);
};

对于长文本感到抱歉，但我希望你能提供帮助。

问候安德烈

Answer 1

一旦我也需要这种类型的要求，其中需要显示用户名和图片，在尝试了很多之后，我想出的是构建我自己的自定义自动完成，并且它很好用，我会在需要时重复使用它，你可以看到这里：

http://developmentpassion.blogspot.com/2013/12/facebook-and-linkedin-like-searching.html

jQuery：自动完成多个ajax请求

1 个答案: