Autocomplete - how change ul on div?

Question

Good day.

Standart jquery autocomlete forming result in <ul>:

.data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li>" )
                .data( "item.autocomplete", item )
                //.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )

                .append('<a href="http://testwork.ru/id' + item.uid + '" class="ts_contact  clear_fix write" id="ts_contact' + item.uid + '" target="_blank">' +
                '<span class="ts_contact_photo fl_l">' +
                '<img src="' + item.icon + '">' +
                '</span>' +
                '<span class="ts_contact_name fl_l">' + item.value +
                '<div class="ts_contact_info">' + item.desc + '</div>' +
                "</span>" +
                '<div class="ts_contact_status"></div>' +
                '</a>')

                .appendTo( ul );
        };

in firebug we can see:

But now i would like change <ul> on <div class="example">.

Anybody has ideas how make this ?

Answer 1

If you want to replace the ul you will have to change the element after the creation of the plugin, for example:

var auto = $( "#tags" ).autocomplete({ ... });

var oldparent = auto.data('uiAutocomplete').menu.element.parent();

auto.data('uiAutocomplete').menu =  $('<div></div>').addClass( "ui-autocomplete ui-front" )
            .appendTo(oldparent)
            .menu({ role: null })
            .hide()
            .data( "menu" );

A demo here.