Home/ Questions/Q 7757261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T13:02:40+00:00

As a newb to jQuery I’m wondering if it’s possible to have both jQuery

  • 0

As a newb to jQuery I’m wondering if it’s possible to have both jQuery _renderItem (for custom list item HTML/CSS) and the categories working together in harmony.

I’ve 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);
    });
}
});

I’d 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Monday morning blues have lifted, I can see clearly now, here is the answer for anyone looking :

    $(document).ready(function () {

$.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);
    });
}
});

$(':input[data-autocomplete]').catcomplete({
source: $(':input[data-autocomplete]').attr("data-autocomplete")
}).data("catcomplete")._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);
};

});
    • 0