Question

我正在尝试使用自动完成小部件，该小部件通过AJAX请求从远程源获取其数据。数据应该作为AddressController上GetDistricts Action方法的JSON结果出现。不幸的是，当我在文本框中输入时，菜单不会弹出。我检查了Firebug中的响应，一切似乎都很好： {"districtNames":["Beirut","Bekaa","Mount Lebanon","South","Nabatieh","North"]}所以我真的不知道发生了什么......这是我的jQuery代码：

            district.autocomplete({
                minLength: 2,
                source: function (request, response) {
                    $.ajax({
                        type: "GET",
                        url: '@Url.Action("GetDistricts", "Address")',
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.text,
                                    value: item.text
                                }
                            }))
                        }
                    })
                }
            });

这是我的行动方法：

    public ActionResult GetDistricts(string term)
    {
        var districts = _service.GetDistricts();
        var districtNames = from c in districts select c.Name;
        return Json(new {districtNames}, JsonRequestBehavior.AllowGet);
    }

P.S：我尝试使用本地数据，其中源是一个数组，它工作得很好。所以我不认为这与CSS有关...

Answer 1

来自控制器操作的结果数组不是小部件期望的格式。自动填充需要一个字符串数组（或具有value和label属性的对象数组），而不是具有单个属性的对象，其值是字符串数组。

您可以通过更新控制器操作来解决此问题：

public ActionResult GetDistricts(string term)
{
    var districts = _service.GetDistricts();
    var districtNames = from c in districts select c.Name;
    return Json(districtNames, JsonRequestBehavior.AllowGet);
}

如果你选择了这条路线，你甚至可以放弃删除大量的$.ajax代码并让自动完成处理它：

district.autocomplete({
    minLength: 2,
    source: '@Url.Action("GetDistricts", "Address")'
});

或者您可以在$.ajax success回调中稍微按下数据：

district.autocomplete({
    minLength: 2,
    source: function (request, response) {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetDistricts", "Address")',
            dataType: "json",
            success: function (data) {
                response($.map(data.districtNames, function (item) {
                    return {
                        label: item.text,
                        value: item.text
                    }
                }));
            }
        });
    }
});

注意 $.map调用了data.districtNames。

jQuery UI自动完成：菜单不显示

1 个答案: