Hiển thị biểu tượng trong kết quả tự động hoàn thành giao diện người dùng jQuery

Question

Tôi đang sử dụng jQuery UI Autocomplete plugin (phiên bản 1.8) và tôi muốn tùy chỉnh cách hiển thị đề xuất. Cụ thể, tôi muốn hiển thị không chỉ một số văn bản, nhưng cũng là một biểu tượng. Tuy nhiên, khi tôi gửi thẻ <img>, thẻ chỉ được hiển thị dưới dạng văn bản thuần túy trong danh sách kết quả.

Có cách nào để thay đổi hành vi này không? Ngoài ra, bạn có thể đề xuất một cách khác để đưa hình ảnh vào kết quả được trả về và hiển thị chúng trong các đề xuất không?

Answer 1

Taken từ 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); 
}; 

Và 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; 
}