jQuery categorized autocomplete search

Question

I have been searching for this all over the internet and on stackoverflow website aswell, but can't seem to find the solution what I have been looking for.

I am trying to implement categorized search bar, and I have got overriden _renderItem method to call inside the _renderMenu method, but it is not working!

Following is my code:

var categorySearch = $("#searchfield").autocomplete({}).data('ui-autocomplete');       


    _renderItem = function(ul, item) {
         return $('<li>')                                  
        .data('item.autocomplete', item)
        .append("<a>"+"<img src ='/account/"+item.id+"/icon/logo' onerror='$(this).hide()' style='width:40px;height:40px;border-radius:50px' alt=''/>" + " " + " " +item.label+"</a>")
        .appendTo(ul); 

     };

    categorySearch._renderMenu = function(ul, items){
        var that = this;
        currentCategory = " "; 
        $.each( items, function( index, item ) {
            if(item.category !== currentCategory) {
            ul.append("<li><strong>" +item.category +"</strong></li>");
            currentCategory = item.category;
        }
        that._renderItem(ul, item);
        });
    };

Everything is working fine except my _renderItem method is not getting implemented. Is there any other way to call the overridden renderItem method?

Answer 1

I found the solution!

I just had to change my _renderItem method to as following:

categorySearch._renderItem