Multi Column AutoComplete using JQUERY-Collection of common programming errors

I am looking at the JQUERY example on the http://jsfiddle.net/g4stL/212/ link in Jsfiddle website.

I am very impressed by the feature. Infact we have to implement the exact same feature on our application.

If I copy the code as it is, I am able to see the multicolumn autocomplete. However the selection part does not work. If I select using mouse cursor or using Arrow keys the program fails.

The error I get is

“htmlfile: Unexpected call to method or property access.”

In the append function of jQuery.fn.extend code in Jquery-1.7.2.js.

mcautocomplete widget is in the custom js file under script folder in MVC.

Can you please help?

$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            thead;

        if (this.options.showHeader) {
            table = $('');
            $.each(this.options.columns, function(index, item) {
                table.append('' + item.name + '');
            });
            table.append('');
            ul.append(table);
        }
        $.each(items, function(index, item) {
            self._renderItem(ul, item);
        });
    },
    _renderItem: function(ul, item) {
        var t = '',
            result = '';

        $.each(this.options.columns, function(index, column) {
            t += '' + item[column.valueField ? column.valueField : index] + ''
        });

        result = $('

').data('item.autocomplete', item).append('' + t + '').appendTo(ul);
        return result;
    }
});

Additional findings: The code works in Fiddle This code does not crash in Chorme or FireFox.