jQuery UI - Форматирование результатов автозаполнения. Добавить изображение возможно?

Question

Мы переходим от автозаполнения bassistance.de к автозаполнению пользовательского интерфейса jQuery. Я не могу найти столько примеров для версии jQuery UI, документация кажется немного скудной. Это может быть только я.

Я хотел бы знать, есть ли у кого-нибудь пример / учебник, который объясняет, как изменить внешний вид выпадающего меню автозаполнения. Мой код выглядит следующим образом:

$( "#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
                    }
                }));
            }
        });
    },
});

Это работает, я получаю идентификаторы и метки, разделенные дефисом. В идеале я хотел бы знать, как отформатировать, как отображаются результаты. Я хотел бы получить идентификатор, а затем под ярлыком. Если возможно, я бы хотел знать, как отобразить изображение справа от текста.

Если у кого-нибудь есть указания, как этого добиться, я был бы очень рад.

Answer 1

На веб-сайте JqueryUI имеется некоторая документация по настройке макета результата: http://jqueryui.com/demos/autocomplete/#custom-data.

Пример:

$( "#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 );
    };