Visualizzazione di un'icona nell'intervallo di risultati dell'interfaccia utente jQuery

Question

Sto utilizzando lo jQuery UI Autocomplete plugin (versione 1.8) e desidero personalizzare il modo in cui vengono visualizzati i suggerimenti. Nello specifico, voglio mostrare non solo del testo, ma anche un'icona. Tuttavia, quando invio il tag img >, viene semplicemente visualizzato come testo normale nell'elenco dei risultati.

C'è un modo per modificare questo comportamento? In alternativa, puoi suggerire un modo diverso di includere le immagini nei risultati restituiti e visualizzarle nei suggerimenti?

Answer 1

Tratto da 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); 
}; 

E il 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; 
}