javascript-带有多于一个字段的图像的JQuery ui自动完成文本

我需要实现一个自动完成功能,该功能可以显示姓名和面孔,就像在Facebook自动完成中一样.在此帖子Jquery UI autocomplete – images IN the results overlay, not outside like the demo和该示例http://jsfiddle.net/K5q5U/中的演示中,我发现了一种很好的方法.
该演示使用StackOverflow的API搜索用户,并在他们的左侧显示他们的头像.
但是问题在于,只有在显示一个输入字段时,它才能正常工作；当我尝试将其更改为几个输入字段时,只有第一个字段显示图像文本,第二个字段从图像中忽略,而仅显示自动完成文本.
(我从数据库获取输入字段,但现在不知道高级字段的数量)

这是我使用的代码

<input class="auto" type="text" />
<input class="auto" type="text" />

$(document).ready(function () {
    $(".auto").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://api.stackoverflow.com/1.1/users",
                data: {
                    filter: request.term,
                    pagesize: 10
                },
                jsonp: "jsonp",
                dataType: "jsonp",
                success: function(data) {
                    response($.map(data.users, function(el, index) {
                        return {
                            value: el.display_name,
                            avatar: "http://www.gravatar.com/avatar/" +
                                el.email_hash
                        };
                    }));
                }
            });
        }
    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li />")
            .data("item.autocomplete", item)
            .append("<a><img src='" + item.avatar + "' />" + item.value + "</a>")
            .appendTo(ul);
    };    
});

任何可以告诉我如何调整的帮助,因此非常感谢您在几个字段中显示自定义图像文本自动完成功能.

解决方法:

也许是一个错误.尝试以下解决方法：

$(".auto").each(function() {

  $(this).autocomplete({    
    // put here remaining code


});

标签：jquery-ui,html,javascript,jquery
来源： https://codeday.me/bug/20191201/2083339.html