Mostrar un icono en jQuery UI autocompletar resultados

Question

Estoy usando el jQuery UI Autocomplete plugin (versión 1.8), y me gustaría personalizar la forma en que aparecen las sugerencias. Específicamente, quiero mostrar no solo texto, sino también un icono. Sin embargo, cuando envío la etiqueta <img>, se muestra como texto sin formato en la lista de resultados.

¿Hay alguna manera de cambiar este comportamiento? Alternativamente, ¿puede sugerir una forma diferente de incluir imágenes en los resultados devueltos y hacer que aparezcan en las sugerencias?

Answer 1

Tomado de here

$("#search_input").autocomplete({source: "/search", 
           minLength: 3, 
           select: function (event, ui) { 
            document.location = ui.item.url; 
           } 
}) 
.data("autocomplete")._renderItem = function (ul, item) { 
    return $('<li class="ui-menu-item-with-icon"></li>') 
     .data("item.autocomplete", item) 
     .append('<a><span class="' + item.type + '-item-icon"></span>' + item.label + '</a>') 
     .appendTo(ul); 
}; 

Y el CSS:

.ui-menu .ui-menu-item-with-icon a { 
    padding-left: 20px; 

} 
span.group-item-icon, 
span.file-item-icon { 
    display: inline-block; 
    height: 16px; 
    width: 16px; 
    margin-left: -16px; 
} 
span.group-item-icon { 
    background: url("/image/icons/group.png") no-repeat left 4px; 
} 
span.product-item-icon { 
    background: url("/image/icons/product.png") no-repeat left 7px; 
}