Multi Column AutoComplete using JQUERY

Question

1. List item

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 = $('<div class="ui-widget-header" style="width:100%"></div>');
            $.each(this.options.columns, function(index, item) {
                table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
            });
            table.append('<div style="clear: both;"></div>');
            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 += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
        });

        result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
        return result;
    }
});

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

Answer 1

I had the same problem. jQuery UI 1.10 changed key by which autocompete saves and then retrieves the item data for one line in the menu. Previously, the key was "item.autotsomplete" and now are "ui-autocomplete-item". Therefore, the data is not found and can not be displayed.

Take the last version of MulticolumnAutocomplete in https://github.com/deaconsoftware/jQueryUI.MulticolumnAutocomplete

You can also alter the line

result = $('<li></li>')
     .data('item.autocomplete', item)
     .append('<a class="mcacAnchor">' + t
              + '<div style="clear: both;"></div></a>').appendTo(ul);

to

result = $('<li></li>')
     .data('ui-autocomplete-item', item)
     .append('<a class="mcacAnchor">' + t
              + '<div style="clear: both;"></div></a>').appendTo(ul);