title: custom jquery autocomplete html
body: <p>I am using jquery autocomplete and I want to wrap the autocomplete ul inside a div I am using these code to customize the output li to include images but I want to wrap it inside a div </p>
  
  <pre><code>  $( "#searchy-input" ).autocomplete({
      minLength: 2,
      source: "/search_suggestions",
      focus: function( event, ui ) {
        $( "#searchy-input" ).val( ui.item.name );
        return false;
      }
  
  
     })
      .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
     return $( "&lt;li class='customClass'&gt;" )
         .append( "&lt;a href='"+item.link+"'&gt;&lt;div class='_20'&gt;&lt;img class='_80 hg30p' src='"+ item.avatar+"'/&gt;&lt;/div&gt;&lt;div  class='span1 mg _60'&gt;" + item.name + "&lt;/div&gt;&lt;/a&gt;" )
         .appendTo( ul );
  }
  </code></pre>
  
  <p>something like on these tutorial </p>
  
  <p><a href="http://www.webdesignerdepot.com/2012/05/foxycomplete-advanced-autocomplete-search-images/" rel="nofollow">http://www.webdesignerdepot.com/2012/05/foxycomplete-advanced-autocomplete-search-images/</a>
   after searching again I found the solution to ovveride the html display for ul is from these private method </p>
  
  <pre><code>_renderMenu: function( ul, items ) {
    var that = this;
   $.each( items, function( index, item ) {
    that._renderItemData( ul, item );
   });
   $( ul ).find( "li:odd" ).addClass( "odd" );
  </code></pre>
  
  <p>}</p>