CODEWITHSUNDEEP
javascriptjqueryautocomplete
Lithium
Lithium

Reputation: 5142

jQuery autocomplete with categories and selection

I'm having some problems implementing jQuery's autocomplete feature with categories and custom display.

I get an error saying 'ui.item' is undefined when I select on 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 am able to see the list drop down when I start typing, so I assume my JSON is well formed. Any ideas what might be causing the 'ui.item is undefined' error?

Edit: After further testing it appears to work when I remove the custom _renderItem method. I am not sure why that is causing the problem however.

Upvotes: 3

Views: 2030

Answers (1)

Lithium
Lithium

Reputation: 5142

Well I figured out my own problem. I didn't understand what

.data("item.categoryautocomplete", item)

did exactly. After reading up on it, I changed it to

.data("item.autocomplete", item)

and everything seems ok.

Upvotes: 3

Related Questions