使用JQUERY实现多列自动完成

Question

1. 列表项

我正在查看Jsfiddle网站上http://jsfiddle.net/g4stL/212/链接中的JQUERY示例。

我非常喜欢这个功能。事实上，我们需要在我们的应用程序中实现完全相同的功能。

如果我按原样复制代码，我可以看到多列自动完成。但是选择部分无法正常工作。如果我使用鼠标光标或箭头键进行选择，则程序会失败。

我收到的错误信息是：

"htmlfile: Unexpected call to method or property access."

这是在jQuery-1.7.2.js文件中的jQuery.fn.extend代码的附加函数中发生的错误。

mcautocomplete小部件位于MVC中脚本文件夹下的自定义js文件中。

你能帮忙吗？

$.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;
    }
});

附加发现： 该代码在Fiddle中能够工作 该代码在Chorme或FireFox中不会崩溃。

- UrbanPlanet

---

有可能您能否设置一个fiddle，以展示问题？ - Andrew Whitaker

它在我刚刚设置的Fiddle中可以工作，但是在使用VS 2010创建的ASP MVC4项目中无法工作。 - UrbanPlanet

Answer 1

我遇到了同样的问题。jQuery UI 1.10 更改了自动完成菜单中保存和检索项目数据的关键字。先前的关键字为 "item.autocomplete"，现在是 "ui-autocomplete-item"。因此，数据无法被找到和显示。

请使用 MulticolumnAutocomplete 的最新版本，下载地址为 https://github.com/deaconsoftware/jQueryUI.MulticolumnAutocomplete。

您也可以修改代码行。

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

为了

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

- IraGnetova

Answer 2

使用以下SQL代码：

SELECT column-duplicate
    FROM TABLE 
GROUP BY column-duplicate
  HAVING COUNT(column-duplicate) > 1

- Cavin