jQuery Autocomplete with _renderItem and catagories
- by LillyPop
As a newb to jQuery im wondering if its possible to have both jQuery _renderItem (for custom list item HTML/CSS) AND the categories working together in harmony?
Ive got my _renderItem working great but I have no idea how to incorporate categories into the mix.
My code so far
$(document).ready(function () {
$(':input[data-autocomplete]').each(function () {
$(':input[data-autocomplete]').autocomplete({
source: $(this).attr("data-autocomplete")
}).data("autocomplete")._renderItem = function (ul, item) {
var MyHtml = "<a>" + "<div class='ac' >" +
"<div class='ac_img_wrap' >" +
'<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
"</div>" +
"<div class='ac_mid' >" +
"<div class='ac_name' >" + item.value + "</div>" +
"<div class='ac_info' >" + item.info + "</div>" +
"</div>" +
"</div>" + "</a>";
return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
};
});
});
The jQuery documentation for the autocomplete gives the following code example :
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var self = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
self._renderItem(ul, item);
});
}
});
Id like to get my custom HTML (_renderItem) and categories working together, can anyone help me to merge these two together or point me in the right direction. Thanks
