Question

我需要实现自动填充功能，该功能可以显示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);
    };    
});

任何可以告诉我如何调整它的帮助，所以自定义图像+文本自动完成将在几个字段中显示将非常感激。

Answer 1

也许这是一个错误。试试这个解决方法：

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

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


});

JQuery ui自动完成包含多个字段的图像的文本

1 个答案: