Jquery UI autocomplete with Ajax: the advanced stage

stage 3: advanced
so we have a few cool functions with this autocomplete.
1st thing is that we can return complex data, say we return an object:

class AnObject
{
  public int ID { get; set; }
  public string Name { get; set; }
  public DateTime CreationTime { get; set; }
}

public void ProcessRequest(HttpContext context)
{
  List<AnObject> l = new List<AnObject>();
  l.Add(new AnObject() { ID = 1, Name = "space marine", CreationTime = DateTime.Now });
  l.Add(new AnObject() { ID = 2, Name = "galaxy cow", CreationTime = DateTime.UtcNow });
  l.Add(new AnObject() { ID = 3, Name = "dimention cat", CreationTime = DateTime.Today });
  l.Add(new AnObject() { ID = 4, Name = "big bad zerg", CreationTime = DateTime.Now.AddDays(3) });
  l.Add(new AnObject() { ID = 5, Name = "psychic being", CreationTime = DateTime.Now.AddDays(-5) });

  if (context.Request.QueryString["ID"] != null)
    l = l.Where(o => o.ID == int.Parse(context.Request.QueryString["ID"])).ToList();

  if (context.Request.QueryString["Name"] != null)
    l = l.Where(o => o.Name.Contains(context.Request.QueryString["Name"])).ToList();

  context.Response.ContentType = "application/json";
  JavaScriptSerializer jss = new JavaScriptSerializer();
  context.Response.Write(jss.Serialize(l));
} 

client side add this:
 
url: "Handler1.ashx",
data: "Name=" + request.term,
success: function (data) {
  response($.map(data, function (item) {
    return { label: item.ID + " " + item.Name + " " + item.CreationTime }
  }))
} 

as you can see we just brought back complex data that the map function knows it in the item object and you can spam it in your choise.

something a bit more useful is the select function, say we put this html
<input id="MyTextBox" type="text" />
<div id="Blue" style="background-color:Blue"></div>
<div id="Green" style="background-color:Green"></div>
<div id="Orange" style="background-color:Orange"></div>

we can do this
$("#MyTextBox").autocomplete({
  source: function (request, response) {
     $.ajax({
       url: "Handler1.ashx",
       data: "Name=" + request.term,
       success: function (data) {
         response($.map(data, function (item) {
           return {
             label: item.Name,
             id: item.ID,
             time: item.CreationTime
           }
         }))
       }
     })
   },
   select: function (event, ui) {
      $("#Blue").text(ui.item.label);
      $("#Green").text(ui.item.id);
      $("#Orange").text(ui.item.time);
   }
}); 

what happened here? well $.map just creates a new array of objects as we decide it, do we can put anything there (btw if u return a 'label' prop in your object, like in 'AnObject', you could just do response(data) and thats it cuz 'label' is used to show).
now the response is a callback thing and as u can see we can use is afterwards in our events like select there we can use this object as ui.item.

more functions and events in their api, a great api, no simple walkthrough
for the final part for masters!
http://bresleveloper.blogspot.co.il/2013/04/jquery-ui-autocomplete-with-ajax-master.html