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


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
  source: function (request, response) {
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) {

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!


Popular posts from this blog

c# Service Play Sound with NAudio example by Moshe

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

JS/JQ simulate Enter event