Question

I want to implement a search box in my website with autocompleting text together with the photo.

Here’s my current code:

HTML:

<h4>search:<input type="text" id="name-list" /></h4>

JavaScript:

$(function () {
    $("#name-list").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/Searchuser",
                type: "POST",
                dataType: "json",
                data: {
                    searchText: request.term,
                    maxResults: 10
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.DisplayName + " R:" + item.Reputation,
                            value: item.DisplayName,
                            id: item.Id
                        }
                    }))
                }
            })
        },
        select: function (event, ui) {
            alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id) : "Nothing selected, input was " + this.value);
        }
    });
});

I’m using ASP.NET MVC2, and I’m passing the json string (after querying the local db) with image url and other information from the controller to the view. Text is working fine.

Can anybody help me how to render image and append to the list item?

Answer 1

I made these changes to the code and then it worked well.

CSS:

DIV.list_item_container {
    height: 90px;
    padding: 0px;
}
DIV.image {
    width:90px;
    height: 90px;
    float: left;
}
DIV.description {
    font-style: italic;
    font-size: 1.1em;
    color: gray;
    padding: 5px;
    margin: 5px;
}
#name-list {
    width: 300px;
}

JavaScript:

$(document).ready(function () {
    $('#name-list').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/Searchuser",
                data: {
                    searchText: request.term,
                    maxResults: 10
                },
                dataType: "json",
                success: function (data) {

                    response($.map(data, function (item) {
                        return {
                            value: item.DisplayName,
                            avatar: item.PicLocation,
                            rep: item.Reputation,
                            selectedId: item.UserUniqueid
                        };
                    }))
                }
            })
        },
        select: function (event, ui) {

            alert(ui.item ? ("You picked '" + ui.item.label) : "Nothing selected, input was " + this.value);

            return false;
        }
    }).data("autocomplete")._renderItem = function (ul, item) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.avatar + '"></div><div class="label"><h3> Reputation:  ' + item.rep + '</h3></div><div class="description">' + item.label + '</div></div></a><hr/>';
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append(inner_html)
            .appendTo(ul);
    };
});