I was using jquery 1.9 and decided to try putting in 1.11.2 for the smaller file size. With 1.9 I had a custom widget I found that looked like this

1. $.widget("custom.catcomplete", $.ui.autocomplete, {
       _renderMenu: function (ul, items) {
           var that = this,
           currentCategory = "";
           $.each(items, function (index, item) {
               if (item.category != currentCategory) {
                   ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                   currentCategory = item.category;
               }
               that._renderItemData(ul, item);
           });
       }
   });

Now when using 1.11.2 it appears that this no longer works.  I get an error on

1.   focus: function (event, ui) {//what populates the drop down
               $("[id$=txtClassIndex]").val(ui.item.label);
               $("[id$=hfClassIndexID]").val(ui.item.value);
    
               return false;
           },

in the query. The error reads 0x800a138f - JavaScript runtime error: Unabel to get property 'label' of undefined or null reference. the line number show this to be on the

1. $("[id$=txtClassIndex]").val(ui.item.label);

line. I was using the widget so that I could loop through the result set. Was hoping someone could point me in the right direction of what I need to do to fix this. When I downloaded the jquery files from jqueryui.com, I did a custom download and told it to include everything for now.. just to make sure I wasn't leaving something out.   There is data coming back it's when I got to select it that the error happens.

What I am looking for is in my result that go to the drop down list it would be a descriptor in of what is below

Big Hammers

* Sledge

*Maul

Small Hammers

*Framing

*2lb

So in this case there are 4 pieces of data coming back. 

sledge with a category of Big Hammer

Maul with a category of Big Hammer

Framing with a category of Small Hammer

2lb with a category of Small hammer

I tried to convert this to an autocomplete but can't figure out the $.each equivalent..  in the autocomplete .data I can't figure out where to grab the items from.. only an item.

Here is what the entire script looks like.  Any help would be great.

1. $.widget("custom.catcomplete", $.ui.autocomplete, {
       _renderMenu: function (ul, items) {
           var that = this,
           currentCategory = "";
           $.each(items, function (index, item) {
               if (item.category != currentCategory) {
                   ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                   currentCategory = item.category;
               }
               that._renderItemData(ul, item);
           });
       }
   });
    
   $(function () {
       $(".cClassID").click(function () {//fires off when you click on the textbox, that the entire textbox gets selected so you don't have to backspace stuff out
           $(this).focus();
           $(this).select();
       });
       $(".cClassID").catcomplete({
           delay: 0,
           source: function (request, response) {
               $.ajax({
                   url: "/GeneralUserControls/wsClassIndex.aspx/_ClassIndexSearch_TestandPreTest",
                   data: "{ 'ClassIndex': '" + request.term + "' }",//Parm name and what is in the textbox passed in
                   dataType: "json",
                   type: "POST",
                   contentType: "application/json; charset=utf-8",
                   dataFilter: function (data) { return data; },
                   success: function (data) {
                       response($.map(data.d, function (item) {
                           return {
                               label: item.ClassTitle, //map properties used in class returned by JSON to what autocomplete wants
                               value: item.tblClassIndexID,
                               category: item.Comments,
                               desc: item.vcCCQualtsCustomTitle,
                               custTitleID: item.CustomTitleID
                           }
                       }))
                   },
                   error: function (XMLHttpRequest, textStatus, errorThrown) {
                       alert(errorThrown);
                   }
               });
           },
           minLength: 2,
           select://fires off when you make a selection
               function (event, ui) {
                   $("[id$=txtClassIndex]").val(ui.item.label);
                   $("[id$=hfClassIndexID]").val(ui.item.value);
                   $("[id$=hfCustomTitleID]").val(ui.item.custTitleID);
    
                   //get the page name to see if we want to fire off this JaxIt code
                   var sPath = window.location.pathname;
                   var sPage = sPath.substring(sPath.lastIndexOf('/') + 1).toLowerCase();
                   if (sPage == "individualexam.aspx" || sPage == "massscheduleapplicant.aspx") {
                       //ThirtyDayRuleChanged(ui.item.value);
                       ThirtyDayRuleChanged();
                   };
    
                   return false;
               },
           focus: function (event, ui) {//what populates the drop down
               $("[id$=txtClassIndex]").val(ui.item.label);
               $("[id$=hfClassIndexID]").val(ui.item.value);
    
               return false;
           },
       }).data('custom-catcomplete')._renderItem = function (ul, item) {
           return $('<li>')
               .data("ui-autocomplete-item", item)
               .append("<a>" + item.label + "<div style='padding-left:10px'>" + item.desc + "</div>" + "</a>")
               .appendTo(ul);
    
       };
   });