CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
user2217623
user2217623

Reputation: 13

JQuery UI Autocomplete select returning undefined

I've been searching solidly for a few hours and I can't seem to figure out what I need to do. I'm using an older version of Autocomplete in JQuery UI 1.8.16. Before you ask sadly I can't upgrade it. I'm trying to set up a custom data display so I'm using the "custom-data" example from the documentation. My Code is properly constructed in the format the example expects however I have added a few other keys that I need so. My structure looks like what I've provided in this jsBin. http://jsbin.com/zut/1/edit

I need to override the select and focus functions. After following the examples. I have this code defined for the template section.

        .data("autocomplete")._renderItem = function(ul, item) {
                var template;
                if (item.isActive === true) {
                    template = "<a>" + item.label + item.desc + item.status + "</a>";
                } else {
                    template = "<a >" + item.label + item.desc  + "<span class='inactive'>" + item.status 
                    + "</span></a>";
                }

                return $("<li>")
                    .append(template) // .append("<a>" + item.label + item.desc + "</a>")
                    .appendTo(ul);
        };
    },

this renders the template fine however I receive an "undefined" for the "ui" param in the select and focus specifically "TypeError: ui.item is undefined"

I tried changing .data("autocomplete") to .data("ui-autocomplete") This will get rid of the "TypeError: ui.item is undefined" however now all the extra template data is gone and I'm only displaying the labels.

I put it back and then messed around with using ._renderItemData vs ._renderItem and this results in the same as above. Original error is gone however all extra text is gone.

I'm at a bit of a loss any and all help would be greatly appreciated! I JUST want to display the extra custom text while still overriding the select and focus values. All the "fixes" I've found so far seem to fix one issue but break all the "custom data".

Upvotes: 1

Views: 1190

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You are missing setting to set a data to the li

.data("autocomplete")._renderItem = function (ul, item) {
    var template;
    if (item.isActive === true) {
        template = "<a>" + item.label + item.desc + item.status + "</a>";
    } else {
        template = "<a >" + item.label + item.desc + "<span class='inactive'>" + item.status + "</span></a>";
    }

    return $("<li>")
        //missing this
        .data( "item.autocomplete", item )
        .append(template)
        .appendTo(ul);
};

Demo: Fiddle

See the original implementation at http://code.jquery.com/ui/1.8.16/jquery-ui.js there this data value is set

Upvotes: 1

Related Questions