jQuery UI 自动完成 : Menu does not show up

Question

我正在尝试使用自动完成小部件，该小部件通过 AJAX 请求从远程源获取数据。数据应作为 AddressController 上的 GetDistricts 操作方法的 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

Controller 操作的结果数组不是小部件期望的格式。自动完成需要一个字符串数组(或具有 value 和 label 属性的对象数组)，而不是具有值是字符串数组的单个属性的对象。

您可以通过更新 Controller 操作来解决此问题:

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 调用的。