自动完成显示列表项的[对象对象]而不是值

时间:2014-05-15 21:04:42

标签: javascript jquery ajax asp.net-mvc asp.net-mvc-3

我的jQuery自动完成看起来像这样......

enter image description here

如果我发表console.log声明,我可以看到每个列表项实际上都有我想要的键/值对,但无论出于何种原因它都无法正常显示。我使用Ajax调用来填充列表,这是代码的样子

控制器

    public JsonResult GetDistributorInfo(string term)
    {
        var banks = from c in db.BankListMaster.Where(n => n.BankName.Contains(term))
                    select new
                        {
                            Key = c.ID,
                            Value = c.BankName
                        };

        return Json(banks, JsonRequestBehavior.AllowGet);
    }

的jQuery / AJAX

    var tempResults = [];
    $(function () {
        $('#DisplayDistributor').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetDistributorInfo", "Agent")',
                    type: 'GET',
                    dataType: 'json',
                    data: request,
                    success: function (data) {
                        tempResults = data;
                        response($.map(data, function (value, key) {
                            return {
                                label: value,
                                value: key
                            };
                        }));
                    },
                });
            },
            minLength: 2,
            select: function (event, ui) {
                console.log(ui);
                $('#DistributorId').val(tempResults[ui.item.key]);
                $('#DisplayDistributor').text(tempResults[ui.item.value]);

                return false;
            }
        });
    });

2 个答案:

答案 0 :(得分:2)

返回的数据是一个对象数组。 value调用的$.map()参数包含对象,key参数是数组中项目的索引(请参阅第一个“重载”here)。因此,您将对象本身设置为label属性,这就是它显示为[object Object]的原因。

试试这个:

response($.map(data, function (item, idx) {
    return {
        label: item.Value,
        value: item.Key
    };
}));

答案 1 :(得分:1)

您在响应中错误地使用了该项目并选择了方法:

1)您的回答应如下:

response($.map(data, function (item) {
    return {
        label: item.label,
        value: item.value
    };
}))

2)您的选择应如下所示:

select: function (event, ui) {
    $('#DistributorId').val(tempResults[ui.item.value]); // You are using item.key here
    $('#DisplayDistributor').text(tempResults[ui.item.label]);

    return false;
}