JQuery autocomplete with categories and choices

I'm having trouble implementing jQuery's autocomplete function with categories and custom mapping.

I get the error "ui.item" undefined when I select one of the entries. My code is below

$jq.widget("custom.categoryautocomplete", $jq.ui.autocomplete, {
    _renderMenu: function(ul, items){
        var self = this;
        var currentCategory = "";
        $jq.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);
        });
    }
});

$jq(function(){
    $jq("#tlf\\:tlfs").categoryautocomplete({
        source: getAutoCompleteSource(),
        focus: function(event, ui){
            $jq("#tlf\\:tlfs").val(ui.item.label);
            return false;
        },
        select: function(event, ui){
            $jq("#tlf\\:tlfs").val("");

            // JavaScript code to select the row.
            selectRow(ui.item.rownum);

        return false;
        }
    }).data("categoryautocomplete")._renderItem = function (ul, item) {
         return $jq("<li></li>")
            .data("item.categoryautocomplete", item)
            .append("<a>" + item.type +" - " + item.uid + "<br>" + item.desc + "</a>")
            .appendTo(ul);
    };
});

I can see the list drop out when I start typing, so I assume my JSON is well formed. Any ideas that ui.item may cause is an undefined error?

Edit: after further testing, it works when I delete the method custom _renderItem. I am not sure why this is causing the problem.

+3
source share
1 answer

Ok, I figured out my own problem. I did not understand that

.data("item.categoryautocomplete", item)

.

.data("item.autocomplete", item)

.

+3

All Articles