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-autoplete]').each(function () {
    $(':input[data-autoplete]').autoplete({
        source: $(this).attr("data-autoplete")
    }).data("autoplete")._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.autoplete", item).append(MyHtml).appendTo(ul);
    };
});
});

The jQuery documentation for the autoplete gives the following code example:

$.widget("custom.catplete", $.ui.autoplete, {
_renderMenu: function (ul, items) {
    var self = this,
            currentCategory = "";
    $.each(items, function (index, item) {
        if (item.category != currentCategory) {
            ul.append("<li class='ui-autoplete-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?

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-autoplete]').each(function () {
    $(':input[data-autoplete]').autoplete({
        source: $(this).attr("data-autoplete")
    }).data("autoplete")._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.autoplete", item).append(MyHtml).appendTo(ul);
    };
});
});

The jQuery documentation for the autoplete gives the following code example:

$.widget("custom.catplete", $.ui.autoplete, {
_renderMenu: function (ul, items) {
    var self = this,
            currentCategory = "";
    $.each(items, function (index, item) {
        if (item.category != currentCategory) {
            ul.append("<li class='ui-autoplete-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?

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Oct 25, 2015 at 16:24 Sam Hosseini 75422 gold badges99 silver badges1818 bronze badges asked Mar 12, 2012 at 12:04 LenPopLillyLenPopLilly 1,22733 gold badges1313 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

$(document).ready(function () {

$.widget("custom.catplete", $.ui.autoplete, {
_renderMenu: function (ul, items) {
    var self = this,
        currentCategory = "";
    $.each(items, function (index, item) {
        if (item.category != currentCategory) {
            ul.append("<li class='ui-autoplete-category'>" + item.category + "</li>");
            currentCategory = item.category;
        }
        self._renderItem(ul, item);
    });
}
});

$(':input[data-autoplete]').catplete({
source: $(':input[data-autoplete]').attr("data-autoplete")
}).data("catplete")._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.autoplete", item).append(MyHtml).appendTo(ul);
};

});

Had the same problem. For me it worked after I added renderItem in the following way:

searchBox.data("custom-catplete")._renderItem = function(ul, item) {
                return $("<li></li>").data("item.autoplete", item)
                    .append("<a>" + item.url + "</a>")
                    .appendTo(ul);
            };

I kept having this error: cannot set property '_renderitem' of undefined

This is the way I fixed it:

$.widget("custom.catplete", $.ui.autoplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autoplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autoplete-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        li.removeClass().addClass("search-result section-item");
        li.text('');
        li.append('<a class="ui-corner-all"><div class="display">' + item.label + '</div></a>');
        if (item.category) {
            li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    }
  });

As you can see I'm never calling _renderItem

You can see the full demo click here for jsfiddle