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

我试图使用一个自动完成的小部件，它通过AJAX请求从远程源获取数据。数据应该是AddressController上的

GetDistricts

操作方法的JSON结果。不幸的是，当我在文本框中键入时，菜单不会弹出。我检查了Firebug中的响应，一切似乎都正常：

{“地区名称”：[“贝鲁特”、“贝卡”、“黎巴嫩山”、“南部”、“纳巴蒂埃”、“北部”}

所以我真的不知道发生了什么。。。以下是我的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);
    }

---

附言：我在本地数据源是数组的情况下尝试过，效果很好。因此，我认为这与CSS无关…

控制器操作的结果数组的格式不是小部件所期望的格式。Autocomplete需要字符串数组（或具有

值

和

标签

属性的对象数组），而不是具有单个属性且其值为字符串数组的对象

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

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

如果您采用这种方法，您甚至可以删除大量的

$.ajax

代码，并让autocomplete处理它：

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

是用

数据调用的。districtNames

@Andrew Whitaker:是的，我改变了从action方法发回数据的方式。它工作正常，菜单弹出。但我无法选择项目。它不断抛出此错误：

f.item为null

。这可能是自动完成小部件本身的一个bug还是什么？@Kassem:有趣的是——您仍然将

源代码定义为一个函数，还是您只是使用控制器操作的url？@Andrew Whitaker:只是控制器操作的url。当我试图将源代码定义为函数时，菜单弹出“empty”。我检查了firebug中的
ul
标签，所有
li
标签中都没有任何内容。有什么想法吗？@Kassem:嗯，不确定——这似乎是一个非常简单的小部件用法。您在使用本地数据源（如JS数组）时是否遇到此错误？@Kassem:另外，如果您可以在中重现此错误，我很乐意查看：）