javascript - Jquery UI Autocomplete Custom HTML (item is undefined) -

i've been banging head off desk trying jquery ui autocomplete output custom html. here code.

        $(document).ready(function(){          $.widget( "custom.catcomplete", $.ui.autocomplete, {             _rendermenu: function( ul, items ) {                 var self = this,                     currentcategory = "";                 $.each( items, function( index, item ) {                     if ( item.category != currentcategory ) {                         ul.append( "<li class='ui-autocomplete-category'>" + item.category + "<ul class='autocomplete-category'></ul></li>" );                         currentcategory = item.category;                     }                     self._renderitem( ul, item);                 });             }         });          var data = [             { label: "anders", category: "antigen" },             { label: "andreas", category: "antigen" },             { label: "antal", category: "antigen" },             { label: "annhhx10", category: "products" },             { label: "annk k12", category: "products" },             { label: "annttop c13", category: "products" },             { label: "anders andersson", category: "people" },             { label: "andreas andersson", category: "people" },             { label: "andreas johnson", category: "people" }         ];          $( "#typeahead" ).catcomplete({             delay: 0,             source: data,         })         .data( "catcomplete" )._renderitem = function( ul, item ) {             return $( "<li></li>" )                 .data( "item.catcomplete", item )                 .append( $( "<a class='ui-menu-item'></a>" ).text( item.label ) )                 .appendto( $('ul').last('.autocomplete-category'));         };     }); 

i seem running trouble nesting lists in renderitem function. html output how want it. when "keydown" javascript error (item undefined).

any ideas or suggestions? i've tried everything.

you there! made 2 changes work (updated after comments op):

after digging jqueryui autocomplete source, looks underlying menu that's used autocomplete widget isn't friendly toward nested elements.

i wrong this, think menu expects simple <ul> children <li>s containing anchor tag.

edit: line confirms suspicion menu (found in jqueryui 1.8.9's menu widget):

    var items = this.element.children("li:not(.ui-menu-item):has(a)")         .addclass("ui-menu-item")         .attr("role", "menuitem");      items.children("a")         .addclass("ui-corner-all")         .attr("tabindex", -1)         // mouseenter doesn't work event delegation         .mouseenter(function( event ) {             self.activate( event, $(this).parent() );         })         .mouseleave(function() {             self.deactivate();         }); 

basically, since a tags buried inside nested list, weren't getting recognized menu.

i bet noticed in original code autocomplete menu items not highlighting when moused on them. highlighting coincides menu item widget thinks active, causing widget fail when user selected item.

since there's nothing semantically wrong or visually wrong giving category lis different class, restructure widget's menu this:

javascript:

_renderitem function:

.data( "catcomplete" )._renderitem = function( ul, item ) {     return $( "<li></li>" )         .data( "item.autocomplete", item )         .append( $( "<a class='ui-menu-item'></a>" )                  .text( item.label ) )         .appendto(ul); }; 

your _rendermenu function:

_rendermenu: function( ul, items ) {     var self = this,         currentcategory = "";     $.each( items, function( index, item ) {         if ( item.category != currentcategory ) {             ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );             currentcategory = item.category;         }         self._renderitem( ul, item);     }); } 

generated html autocomplete menu:

<ul class="ui-autocomplete>     <li class="ui-autocomplete-category">antigen</li>     <li class="ui-menu-item" role="menuitem">          <a class="ui-menu-item ui-corner-all" tabindex="-1">anders</a>     </li>     <li class="ui-menu-item" role="menuitem">         <a class="ui-menu-item ui-corner-all" tabindex="-1">andreas</a>     </li>     <li class="ui-menu-item" role="menuitem">         <a class="ui-menu-item ui-corner-all" tabindex="-1">antal</a>     </li>     <!-- more categories, items, etc.--> </ul> 

judging comments, seemed wanted menu's html nested uls inside of lis each category. let me know if changing html of generated menu isn't option reason.

i've updated example: http://jsfiddle.net/andrewwhitaker/pjs7a/2/

hope helps.