Afficher une icône dans les résultats autocomplete jQuery UI

Question

J'utilise le jQuery UI plug-in Autocomplete (version 1.8), et je comme de personnaliser la façon dont les suggestions apparaissent. Plus précisément, je veux afficher non seulement du texte, mais une icône aussi bien. Cependant, quand j'envoie la balise , il est de rendu sous forme de texte dans la liste des résultats.

Est-il possible de changer ce comportement? Sinon, pouvez-vous suggérer une autre façon d'inclure des images dans les résultats retournés et les faire apparaître dans les suggestions?

Answer 1

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

Et le 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;
}