javascript - 在 jQuery MultiColumn 自动完成中隐藏列

Question

我有一个工作良好的 jquery 多列自动完成功能。现在我必须添加一个应该隐藏的列。基本上它是值的 ID。因此，当用户选择该值时，我可以获得所选行的 ID。

//代码:

<script type="text/javascript">

    var autocompleteSource;
    var colValues = [];
    var columns = [{ name: 'Workflow Name', width: '200px' }, { name: 'Workflow Category', width: '150px' }, { name: 'Status', width: '100px' }, { name: 'Workflow Owner', width: '150px' }];

    $.ajax({
        url: "/Home/LoadWorkflowDropdown",
        datatype: 'json',
        mtype: 'GET',
        success: OnComplete,
        error: OnFail
    });
    function OnComplete(result) {

        autocompleteSource = $.parseJSON(result)
        $.each(autocompleteSource, function () {

            colValues.push([this.WorkflowName, this.WorkflowCategory, this.StatusName, this.UserName]);
        });

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

        $("#search").mcautocomplete({
            showHeader: true,
            columns: columns,
            source: colValues,
            select: function (event, ui) {
                this.value = (ui.item ? ui.item[0] : '');
                return false;
            }

        });

    }

</script>

工作中Fiddle这里

Answer 1

这里我修改了 js 代码，为每个记录添加唯一的 id，并在用户从自动建议列表中选择特定选项时获取该值。 Fiddle

HTML:创建一个隐藏字段来存储所选选项的 ID

<input type="hidden" name="selectedId" id="selectedId" />

JS:在数组中添加 id，并通过 index 值在 select 函数中检索这些 id。

var columns = [{
    name: 'Color',
    width: '100px'},
{
    name: 'Hex',
    width: '70px'}],
    colors = [['Red', '#f00', '1'], ['Green', '#0f0', '2'], ['Blue', '#00f', '3']];

$("#search").mcautocomplete({
    showHeader: true,
    columns: columns,
    source: colors,
    select: function(event, ui) {
        $('#selectedId').val(ui.item[2]);
        this.value = (ui.item ? ui.item[0] : '');
        return false;
    }
});