jQuery UI Autocomplete結果にアイコンを表示します
-
04-10-2019 - |
質問
私は使用しています jQuery UI Autocompleteプラグイン (バージョン1.8)、そして私は提案の表示方法をカスタマイズしたいと思います。具体的には、テキストだけでなくアイコンも表示したいと思います。しかし、私が送るときu003Cimg>タグ、結果リストの単純なテキストとしてレンダリングされます。
この動作を変更する方法はありますか?または、返された結果に画像を含める別の方法を提案し、それらを提案に表示することをお勧めしますか?
解決
から取られた ここ
$("#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);
};
そして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;
}
所属していません StackOverflow