jQuery UI - Formatting the autocomplete results. Add image possible?

Question

We're moving from the bassistance.de autocomplete to jQuery UI autocomplete. I can't find as many examples for the jQuery UI version, the documentation seems a little sparse. That could just be me.

I'd like to know if anyone has an example/tutorial which explains how to alter the look and feel of the autocomplete drop down. My code is as follows:

$( "#SearchInput" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "http://servername/index.pl",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function( data ) {
                response( $.map( data.items, function( item ) {
                    return {
                        label: item.id + " - " + item.label,
                        value: item.id
                    }
                }));
            }
        });
    },
});

This works, I get the ID and Label displayed seperated by a hyphen. Ideally I'd like to know how to format how the results are displayed. I'd like the ID then below the ID the label. If possible I'd like to know how to display an image to the right of the text.

If anyone has any pointers on how to achieve this I'd be greatful.

Answer 1

There is some documentation on JqueryUI website on how to customize the result layout: http://jqueryui.com/demos/autocomplete/#custom-data.

Some example:

$( "#SearchInput" ).autocomplete({ .... }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + "<img src='" + item.imgsrc + "' />" + item.id+ " - " + item.label+ "</a>" )
            .appendTo( ul );
    };