Jquery autocomplete - custom html for result listing

Question

I am referring to this plugin: http://jqueryui.com/demos/autocomplete/

So the original structure for the results is

Answer 1

You can use create event for autocomplete for newer versions. Like this:

create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;
                return $('
')
                    .append('
')
                    .append('')
                    .append('')
                    .append(item.label)
                    .append('')
                    .append('
')
                    .append('
')
                    .appendTo(ul); // customize your HTML
            };
        }

For full code review, I am attaching the way I bound autocomplete to my textbox.

$('.myTextBox').autocomplete({
        source: function (request, response) {

            // your call to the server
        },
        select: function (event, ui) {
            // when item is selected
            $(this).val(ui.item.label);
        },
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;

                 return $('
')
                    .append('
')
                    .append('')
                    .append('')
                    .append(item.label)
                    .append('')
                    .append('
')
                    .append('
')
                    .appendTo(ul); // customize your HTML
            };
        }
});