0

jsfiddleに従って_renderMenuと_renderItemを使用して、マルチカラムでjquery-uiオートコンプリートを使用しています

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

結果を選択せず​​にオートコンプリートの外側をクリックすると、変更イベントがトリガーされます。

ただし、ヘッダー（列）をクリックしてから外側をクリックすると、変更イベントはトリガーされません。

前もって感謝します

4

1 に答える 1

0

問題を修正することができました.jqueryは、オートコンプリートがアイテムデータを保存するキーを「item.autocomplete」から「ui-autocomplete-item」に変更したため、修正は行を変更することです:

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);

これは、jquery 1.10 を使用した動作中の jsfiddle です。

于 2014-02-12T16:15:51.950 に答える