使用 MCAutocomplete Jquery UI 在 MVC 中返回未定义的多列答案

【问题标题】：Multiple Column returns undefined in MVC using MCAutocomplete Jquery UI使用 MCAutocomplete Jquery UI 在 MVC 中返回未定义的多列
【发布时间】：2016-06-14 17:04:07
【问题描述】：

我在 mvc 中的多列返回未定义。

我错过了什么？还是我的代码有问题？请帮忙。

控制器

public ActionResult EmployeeIDSearch(string term)
    {
        // Get Tags from database
        using (var ctx = new DASH_FAEntities())
        {
            var tags = (from e in ctx.EmployeeMasters
                        where e.EMT_EmployeeID.ToLower().Contains(term.ToLower().Trim())
                        select new
                        {
                            EmployeeID = e.EMT_EmployeeID.Trim(),
                            FullName = e.EMT_FirstName.Trim() + " " + e.EMT_LastName.Trim(),
                            Department = e.EMT_Department.Trim()
                        }).ToArray();

            return Json(tags, JsonRequestBehavior.AllowGet);
        }
    }

查看

@Html.TextBox("EmployeeID", null, new { @class = "form-control", @placeholder = "Employee ID", @id="employeeid" })

jQuery

function customRenderItem(ul, item) {
            var t = '<span class="mcacCol1">' + item[0] + '</span><span class="mcacCol2">' + item[1] + '</span><span class="mcacCol3">' + item[2] + '</span>',
                result = $('<li class="ui-menu-item" role="menuitem"></li>')
                .data('item.autocomplete', item)
                .append('<a class="ui-corner-all" style="position:relative;" tabindex="-1">' + t + '</a>')
                .appendTo(ul);

            return result;
        }

        var columns = [{ name: 'Employee ID', minWidth: '100px' }, { name: 'Full Name', minWidth: '100px' }, { name: 'Department', minWidth: '100px' }]

        $("#employeeid").mcautocomplete({
            showHeader: true, 
            columns: columns,
            source: '@Url.Action("EmployeeIDSearch", "Home")',
            select: function (event, ui) {
                this.value = (ui.item ? ui.item[0] : '');
                return false;
            }
        });

mcautocomplete.js

我已经检查了这个插件的jsfiddle 文件。我只是更改了来源并添加了另一列。但是当我查找员工 ID 时仍然未定义。

我在控制器的断点处获取我的来源，并且每次我为员工 ID 计时它都有一个值。

我也已经用谷歌搜索了，但我什么也没找到。这是昨天，我不知道该怎么办。我不想使用其他插件，因为我的网络使用不同的插件会很慢。

请帮忙。

【问题讨论】：

name 属性中有空格，因此它们与属性名称不匹配。查看文档，您似乎需要指定 valueField 属性 - 例如 . var columns = [{ name: 'Employee ID', minWidth: '100px', valueField: EmployeeID }, .....等
但是如何更改列名？我的意思不是它的属性名称而是它的视图名称？同样按照你的说法，我的部门列与我的对象有确切的名称，但它仍然未定义
尝试按照我上次的评论添加valueField
好的@StephenMuecke 我会试试的
您的源应该是实际的 JSON 数组，而不仅仅是动作的路径。将您的代码更改为 AJAX 从操作中获取结果，然后将其用作源

标签： javascript jquery asp.net-mvc autocomplete asp.net-mvc-5

【解决方案1】：

从documentation 开始，您用于columns 属性的语法仅适用于source 是一个数组数组。例如，如果数据是，它会起作用

[['1', 'Joe Blogs', 'Administration'], ['2', 'John Doe', 'Finance']]

但您的控制器方法返回一个对象数组，因此您还需要指定valueField 属性。将columns 定义更改为

var columns = [{ name: 'Employee ID', minWidth: '100px', valueField: 'EmployeeID' },
    { name: 'Full Name', minWidth: '100px', valueField: 'FullName' }, 
    { name: 'Department', minWidth: '100px', valueField: 'Department' }]

valueField 的值与属性名称匹配。

编辑

由于您现在添加的是对象，而不是数组，因此您还需要更改

this.value = (ui.item ? ui.item[0] : '');

到

this.value = (ui.item ? ui.item.EmployeeID : '');

为了在文本框中显示选定的值（请参阅 updated fiddle 以获取工作示例）。

【讨论】：