Mostrar un icono en los resultados de autocompletar jQuery UI

Question

Estoy usando el jQuery UI autocompletar complemento (versión 1.8), y me gustaría personalizar la forma en que las sugerencias se presentan. En concreto, quiero mostrar no sólo un texto, sino un icono también. Sin embargo, cuando envío la etiqueta , sólo se representa como texto sin formato en la lista de resultados.

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

Answer 1

href="http://jqueryui.com/demos/autocomplete/#custom-data" aquí

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