Jquery autocomplete styling

Question

While styling the jQuery autocomplete plugin, I get the following HTML code hardwired to my page:

Answer 1

This can be done by implementing some changes in the "open" method of Autocomplete.

consider this example:

$('#search_text_box').autocomplete({
        source: "baseUrl('items/autocomplete');?>",
        minLength: 2,
        search: function(){
            //$ulForResults.empty();
        },
        'open': function(e, ui) {
            $('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 4);
            $('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] - 2);
            $('.ui-autocomplete').append("
2,000 results found, showing 10
");
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "
" ).data( "item.autocomplete", item ).append( "" + item.name + "" ).appendTo( ul );
    };

In this way by changing how and where your autocomplete appears. The 'ul' that shows autocomplete info has class 'ui-autocomplete' you can manipulate its css in this function to show the drop down the way you want.