出现在jQuery自动完成结果中的jQuery UI图标

Question

我正在使用jQuery Autocomplete Plugin （由jQuery名望的JörnZaefferer提供）。

后端代码：

public JsonResult GetCompanyNames()
    {
        return Json(Model.CompanyNames); //returns valid JSon
    }

相关JS代码：

$('#CompanyName').autocomplete(['Suzuki', 'Honda', 'blah']); //This works fine
$('#CompanyName').autocomplete('/Account/Login/GetCompanyNames'); //This renders icons!

在将Javascript数组作为url / data参数传递时，它可以按预期工作。

但是，当我通过Area/Controller/Action作为参数时，它在相应的文本框中显示了jQuery的ui-icons（呵呵）！！

是的，我希望我可以附上屏幕截图。 相信我，我还是不敢相信自己的眼睛。

调试时，我已验证我的方法返回了有效的JsonResult数据。 我正在使用：ASP.NET MVC3，jQuery 1.4.2。 我已经检查并在Chrome 6.0，IE8和Firefox 3.5中发现了相同的行为

更新：图标甚至在自动完成请求从服务器返回之前出现。

Answer 1

确保允许GET请求：

public ActionResult GetCompanyNames()
{
    return Json(Model.CompanyNames, JsonRequestBehavior.AllowGet);
}

另一个技巧：使用FireBug查看客户端和服务器之间正在正确交换的内容以及任何可能的错误消息。

---

更新：

问题来自以下事实：您需要通过使用parse和formatItem函数来手动解析JSON，因为插件希望以特殊方式格式化数据：

$('#CompanyName').autocomplete('/Account/Login/GetCompanyNames', {
    dataType: 'json',
    formatItem: function (data, i, max, value, term) {
        return value;
    },
    parse: function (data) {
        return $.map(data, function (item) {
            return { data: item, value: item, result: item };
        });
    }
});