jquery-ui-autocomplete - jQueryUIのオートコンプリート結果にアイコンを表示する

Question

jQuery UIオートコンプリートプラグイン（バージョン1.8）を使用していますが、提案の表示方法をカスタマイズしたいと思います。具体的には、テキストだけでなくアイコンも表示したいです。ただし、<img>タグを送信すると、結果リストにプレーンテキストとしてレンダリングされるだけです。

この動作を変更する方法はありますか？または、返された結果に画像を含めて、提案に表示させる別の方法を提案できますか？

Answer 1

ここから撮影

$("#search_input").autocomplete({source: "/search",
                                 minLength: 3,
                                 select: function (event, ui) {
                                     document.location = ui.item.url;
                                 }
})
.data("autocomplete")._renderItem = function (ul, item) {
//As per recent documemtation above line should be 
//.autocomplete( "instance" )._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);
};

そして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;
}