Jquery UI autocomplete with Ajax: master

stage 4: master
sometimes you would like to do more, usually with the _renderItem, lets see that

$(function () {
  $.ui.autocomplete.prototype._renderItem = function (ul, item) {
    return $("<li></li>")
      .append("<a>" + item.name + " <br><span style='background-color:blue'> " +  item.time + "</span><br>" + item.id + "</a>")
      .append("<a href='default.aspx'>go go go</a>")
      .appendTo(ul);
  };
 
           
  $("#MyTextBox").autocomplete({
    source: function (request, response) {
      $.ajax({
       
url: "Handler1.ashx",
        data: "Name=" + request.term,
        success: function (data) {
          response($.map(data, function (item) {
            return {
              name: item.Name,
              id: item.ID,
              time: item.CreationTime
            }
          }))
        }
      })
    }

  });
});
 


usually u would use _renderItem when you want to costumize how the ul looks, and thats what i gave in the expamle, u can even click the 2nd <a> to move a page.
in that case btw you r not limited to the default of 'label' ect.
ul is the ul dom element u see when the autocomplete is being opened, and item is the item you put in the response so u can skip the map part and your js can look like that:

$(function () {
  $.ui.autocomplete.prototype._renderItem = function (ul, item) {
    return $("<li></li>")
       .append("<a>" + item.Name + " <br><span style='background-color:blue'> " + item.CreationTime + "</span><br>" + item.ID + "</a>")
       .append("<a href='default.aspx'>go go go</a>")
       .appendTo(ul);
  };
 
           
  $("#MyTextBox").autocomplete({
    source: function (request, response) {
      $.ajax({                              
        url: "Handler1.ashx",
        data: "Name=" + request.term,
        success: function (data) {
          response(data)
        }
      })
    },

    select: function (event, ui) {
      $("#Blue").text(ui.item.Name);
      $("#Green").text(ui.item.ID);
      $("#Orange").text(ui.item.CreationTime);
    }
 
});
});
 


hope u had fun, now if u feel GrandMaster go check the examples they have in jquery UI site, autocomplete examples.

Comments

  1. כל הכבוד. נהנתי מאד לקרא
    תמשיך לכתוב פוסטים מחכימים כמו זה
    נשכני זריזי

    ReplyDelete

Post a Comment

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

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

Asp.Net Ending Response options, Response.End() vs CompleteRequest()