Question

I need to implement an Autocomplete functionality which display names and faces like in the Facebook autocomplete.
In this post Jquery UI autocomplete – images IN the results overlay, not outside like the demo and in the demonstration which was in that post http://jsfiddle.net/K5q5U/ I found an excellent way to do this.
the demonstration uses StackOverflow’s API for searching users, and shows their avatars to the left of them.
but the problem is that it is working well only when one input field is presented, when I tried to change it to several input fields only the first field displayed the images+ text, the second field ignored from the image and displayed only the autocomplete text.
(I get the input fields from a database and I dont now what is the number of the fields in advanced)

here is the code that i use

<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);
    };    
});

any help which can tell me how I can adjust it, so the custom image+text autocomplete will be displayed in several fields will be very appreciated.

Answer 1

Maybe it’s a bug. Try this workaround:

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

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


});