<h4>search:<input type="text" id="name-list" /></h4>
 <script type="text/javascript" language="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);





            }
        });

    });
</script>

<style type="text/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;


}
</style>

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


});