jQuery Autocomplete custom _renderItem issue

Question

I am having issues with jQuery Autocomplete. I am customizing it to show two kinds of items:

actual matches to the search string and
suggestions (spelling corrections, related keywords, etc)

The backend does all the work on that; the Autocomplete is just fed two lists.

A picture can explain better:

http://shot.ninjaloot.se/20120412.141112.png (The data is just dummy data use while developing, and the styling is not complete yet)

While the rendering works, selection (click or otherwise) of the items throws an exception that is hard to debug:

TypeError: 'undefined' is not an object (evaluating 'ui.item.data')

As I understand it, the menu.selected function is given a ui argument that has an undefined item key.

Why does this happen, and what can I do about it? If I comment out my custom renderer, selection works.

This is my custom renderer function. It's been lifted verbatim from the one in the UI source files and then extended to do my custom haxing.

$input.data("autocomplete")._renderItem = function(ul, item) {
    var cls = 'ui-menu-item';

    if(item.label === null) {
        cls += ' center disabled';
        item.label = '-- perhaps thou meaneth --';
    }

    return $("<li></li>")
     .data("item.autocomplete", item)
     .append("<a class='ui-corner-all'>" + item.label + "</a>")
     .addClass(cls)
     .appendTo(ul);
};

If any more code is needed, I'd be happy to supply it!

can you show a block with the working code? we have the same problem. — chrisvillanueva, Aug 16 '12 at 18:13
It's the same as the bottom example, but the second row is only "var cls = '';" instead of defining it with ui-menu-item. — Lowe Thiderman, Aug 23 '12 at 15:54
You should post your solution as an actual answer instead of editing your question. — lifo, Dec 13 '12 at 14:14

score 1 · Answer 1 · answered Jan 02 '13 at 07:19

SELF-ANSWER! I managed to fix this myself. Appearantly, If you add the class "ui-menu-item" manually, the menu items are considered done and won't get any postprocessing, and the postprocessing is vital for the functionality. If I don't add the class manually, it works.

jQuery Autocomplete custom _renderItem issue

1 Answers1