Zeigen Sie ein Symbol in jQuery UI zur automatischen Vervollständigung Ergebnisse

Question

Ich bin mit der jQuery UI automatische Vervollständigung Plugin (Version 1.8), und ich würde die Art, wie die Vorschläge zeigen, bis zu gestalten. Insbesondere möchte ich nur einen Text nicht angezeigt werden, sondern ein Symbol als auch. Allerdings, wenn ich den Tag senden, es wird nur als Klartext in der Ergebnisliste erstellt.

Gibt es eine Möglichkeit, dieses Verhalten zu ändern? Alternativ können Sie auch eine andere Art und Weise vorschlagen Bilder in den zurückgegebenen Ergebnissen zu schließen und haben zeigen sie in den Vorschlägen nach oben?

Answer 1

Genommen von hier

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