Mostra un'icona nella jQuery UI risultati del completamento automatico

Question

Sto utilizzando il jQuery UI completamento automatico plug (versione 1.8), e mi piacerebbe desidera personalizzare il modo in cui i suggerimenti visualizzati. In particolare, voglio visualizzare non solo una parte di testo, ma un'icona pure. Tuttavia, quando invio il tag , solo che viene reso come testo normale nella lista dei risultati.

C'è qualche modo per cambiare questo comportamento? In alternativa, si può suggerire un modo diverso per includere le immagini nei risultati restituiti e li hanno visualizzati nei suggerimenti?

Answer 1

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

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