Autocomplete formatItem not called, neither any error in firebug

Basically I want to show an image and besides it text. This is my autocomplete code:

 $("#tagBox").autocomplete({
                source: '/Friends/FriendsTagHandl开发者_StackOverflow中文版er.aspx?FileID=<%=Request.QueryString["FileID"] %>',
                scroll: true,
                scrollHeight: 300,
                formatItem: function (data, i, n, value) {
                    console.log(values);
                    var values = value.split(".");
                    return "<img src='/images/ProfileAvatar/ProfileImage.aspx?AccountID=" + values[0] + "'/> " + values[1];
                },
                formatResult: function (data, value) {
                    console.log(value);
                    return value.split(".")[1];
                }
            });

However my my formatItem or formatResult are neither called and nor do I get any error in firebug console.

Update: I read somewhere on SO itself that formatItem is deprecated and we should return formatted data from server itself. So I returned formatted data from my server:

Snippet

 foreach (var item in friends)
            {
                sb.Append("<img src='/images/ProfileAvatar/ProfileImage.aspx?AccountID=" + item.AccountID.ToString() + "'/>" + item.FirstName + " " + item.LastName).
                        Append(Environment.NewLine);
            }
            //context.Response.ContentType = "text/plain";

            context.Response.Write(sb.ToString());

When I hit the url in browser I can correctly see image and the name besides it. However nothing really appears in autocomplete box.

You're getting jQueryUI autocomplete and it's ancestor, jQuery autocomplete confused. jQueryUI autocomplete does not have the formatItem, formatResult, scroll, or scrollHeight options.

To accomplish what you're after, you're going to need to override the _renderItem function, like in this example:

$("#tagBox").autocomplete({ ... })
    ._renderItem = function (ul, item) {
        // Custom item display logic here.
    };

Additionally, your source data should be a function that returns data, the data itself, or a URL that returns data in the following format:

• An array of strings: ['option1', 'option2', 'option3'], or
• An array of objects with property label or value (or both): [{ label: 'option1', value: 'option1'}, { ... }]

First thing is I don't see any formatItem or 'formatResult' In Jquery UI, Here is what I did to do this and make sure you are returning JSON object

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL http://jqueryui.com/demos/autocomplete/#remote-jsonp

  $("#tagBox").autocomplete({
                source: "@Url.Action("Search", "Person")",//I'm using asp.net MVC here 
                select: function (event, ui) {
                    $(this).val( ui.item.Name );

                    return false;
                }
            }).data("autocomplete")._renderItem = function (ul, item) {
                var term=$(#tagBox).val();
                return $("<li style=\"background-color:Yellow\" ></li>")
                .data("item.autocomplete", item)
                .append("<a>"+ "<img src=/images/ProfileAvatar/ProfileImage.aspx?thumbnailId="+item.ImageId +"'></img>" + item.Name.replace(new RegExp('(' + item.Term + ')', 'gi'), "<b>$1</b>")  + "</a>").appendTo(ul);
            };

And my controller code ,

 IList<Person> people= new List<Person>();
// people.Add() here
 return Json(people);

And my person class,

public class Person 
    {
        public int Id{ get; set; }
        public string Name { get; set; }

        public int ImageId 
        {
            get; 
            set;
        }
}