Take the 2-minute tour ×

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

  $( "#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 $( "<li class='customClass'>" )
       .append( "<a href='"+item.link+"'><div class='_20'><img class='_80 hg30p' src='"+ item.avatar+"'/></div><div  class='span1 mg _60'>" + item.name + "</div></a>" )
       .appendTo( ul );

something like on these tutorial

http://www.webdesignerdepot.com/2012/05/foxycomplete-advanced-autocomplete-search-images/ after searching again I found the solution to ovveride the html display for ul is from these private method

_renderMenu: function( ul, items ) {
  var that = this;
  that._renderItemData( ul, item );
 $( ul ).find( "li:odd" ).addClass( "odd" );


share|improve this question
well, just to be clear here, you shouldn't use a <div> within an <a> and instead use a <span>, but that's really just semantics, i guess. other than that, there's no reason that the above code shouldn't work. –  Ohgodwhy Oct 6 '13 at 0:05
I know but you can make the a tag display as inline-block or overflow hidden or setting its height ...the code is working but I want to wrap the ul inside a custom div –  Remon Amin Oct 6 '13 at 0:06
add comment

1 Answer

Based on your comment, it would seem your issue is with wrapping the UL element, and not with the ._renderItem function.

With that being said:


Will do the trick.

http://api.jquery.com/wrap/ a link to the documentation.

share|improve this answer
I tried but not working –  Remon Amin Oct 6 '13 at 0:12
where exactly I put $('ul').wrap('<div></div>'); inside my code ..I know wrap method very well but I think the problem is in the plugin create method –  Remon Amin Oct 6 '13 at 0:22
add comment

Your Answer


