Question

我正在使用带多列的jquery自动完成功能。我已将数据导入搜索框并且工作正常。

选择值时，所选值不会设置到搜索框中。我尝试调试脚本，发现ui.item的值为“ undefined”。

// HTML：

  <div>
            <input id="search" type="text" style="padding: 2px; font-size: .8em; width: 200px;" />
        </div>

//代码：

var autocompleteSource;
    var colValues = [];
    var columns = [{ name: 'Workflow Name', width: '200px' }, { name: 'Workflow Name', 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)
            //debugger;
            $.each(autocompleteSource, function () {

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

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

                });
        }

我尝试在select事件中使用以下行。但没有任何帮助。

event.preventDefault();

还在select事件

中添加了以下代码

  $(this).val(ui.item.label);

这会产生错误（“无法获取未定义或空引用的属性标签”）

我需要ui.item返回我选择的值并设置到我的搜索框中。

我哪里错了？请帮助。

Answer 1

得到了答案。在将值绑定到searchbox之前添加了此代码。

//代码：

 $.widget('custom.mcautocomplete', $.ui.autocomplete, {

            _renderMenu: function (ul, items) {
              //  debugger;
                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) {
                //    debugger;
                    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;
            }
        });

WorkingFiddle

jQuery多列自动完成选择事件返回＆＃34;未定义＆＃34;

1 个答案: