javascript - 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 };
        });
    }
});