使用JQUERY进行多列自动完成

时间:2013-01-09 01:08:58

标签: jquery jquery-ui autocomplete asp.net-mvc-4

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

    这个功能让我印象深刻。事实上,我们必须在我们的应用程序中实现完全相同的功能。

    如果按原样复制代码,我可以看到多列自动完成。但是选择部分不起作用。如果我选择使用鼠标光标或使用箭头键,程序将失败。

    我得到的错误是

    “htmlfile:对方法或属性访问的意外调用。”

    在Jquery-1.7.2.js中的jQuery.fn.extend代码的append函数中。

    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中崩溃。

2 个答案:

答案 0 :(得分:3)

我遇到了同样的问题。 jQuery UI 1.10更改了autocompete保存的密钥,然后检索菜单中一行的项数据。以前,关键是“item.autotsomplete”,现在是“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);

答案 1 :(得分:0)

使用以下SQL代码:

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