Ein Symbol in den Ergebnissen der automatischen Vervollständigung von jQuery UI anzeigen

Question

Ich verwende die jQuery UI Autocomplete plugin (Version 1.8) und möchte die Art und Weise, wie die Vorschläge angezeigt werden, anpassen. Insbesondere möchte ich nicht nur etwas Text, sondern auch ein Symbol anzeigen. Wenn ich jedoch das Tag <img> sende, wird es nur als reiner Text in der Ergebnisliste gerendert.

Gibt es eine Möglichkeit, dieses Verhalten zu ändern? Alternativ können Sie eine andere Möglichkeit vorschlagen, Bilder in die zurückgegebenen Ergebnisse aufzunehmen und sie in den Vorschlägen erscheinen zu lassen?

Answer 1

von here

Genommen

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

Und die 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; 
}