Wyświetl ikonę w wynikach autouzupełniania interfejsu jQuery UI

Question

Używam jQuery UI Autocomplete plugin (wersja 1.8) i chciałbym dostosować sposób wyświetlania sugestii. W szczególności chcę wyświetlić nie tylko tekst, ale także ikonę. Jednak gdy wyślę znacznik <img>, zostanie on po prostu wyrenderowany jako zwykły tekst na liście wyników.

Czy istnieje sposób na zmianę tego zachowania? Czy możesz zaproponować inny sposób dodawania obrazów do zwróconych wyników i pokazywania ich w sugestiach?

Answer 1

Zrobione z 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); 
}; 

a 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; 
}