Friday, April 5, 2013

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.

1 comment:

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

    ReplyDelete