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

Question

我正在使用jQuery Autocomplete Plugin（由 jQuery 成名的 Jörn Zaefferer 编写）。

后端代码：

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 图标（嗯？）！！？

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

在调试时，我已验证我的方法返回有效的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 };
        });
    }
});