jQuery UI自动完成JSON出错：Uncaught TypeError：无法使用“in”运算符搜索“62”。

Question

我在我的页面上无法正常使用自动完成功能，遇到了很多问题。当我在搜索框中输入 2 个字符（“OW”）时，会出现预加载图像（如下所示），但它永远不会消失，我也从未看到自动完成弹出窗口。在 Chrome 中查看控制台后显示：

Uncaught TypeError: Cannot use 'in' operator to search for '62' in [{"value":103,"label":"FLOWER"},{"value":105,"label":"YELLOW"}] 

以下是实际返回的字符串（通过在成功块中添加alert（data）进行确认）：

[{"kwrdID":103,"kwrdKeyWord":"FLOWER"},{"kwrdID":105,"kwrdKeyWord":"YELLOW"}]

这是自动完成的主要代码：

$("#searchInput").autocomplete({
source: function (request, response) {
    $.ajax({
        url: '@Url.Action("GetKeywords", "Home")',
        dataType: "json",
        data: {
            SearchTerm: request.term
        },
        success: function (data) {
            response($.map(data.keywords, function (item) {
                return {
                    label: item.kwrdKeyWord,
                    value: item.kwrdID
                }
            }));
        }
    });
},
    minLength: 2
});

最后，这是预加载程序（以防与之相关）。

$(document).ajaxStart(function () {
    var position = $('#divParent').position();
    position.left += (($('#divParent').width() / 2) - ($('#preloader').width() / 2));
    position.top += (($('#divParent').height() / 2) - ($('#preloader').height() / 2));
    $('#preloader').css(position).show();
    $('#preloader').show();
}).ajaxStop(function () {
    $('#preloader').hide();
});

有人能帮忙解释这里发生了什么吗？

- ESDictor

Answer 1

经过漫长的道路，但在经历了多个小时的实验后，我想出了这段代码：

$("#searchInput").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetKeywords", "Home")',
            dataType: "json",
            data: {
                SearchTerm: request.term
            },
            success: function (data) {
                var parsed = JSON.parse(data);
                var newArray = new Array(parsed.length);
                var i = 0;

                parsed.forEach(function (entry) {
                    var newObject = {
                        label: entry.kwrdKeyWord
                    };
                    newArray[i] = newObject;
                    i++;
                });

                response(newArray);
            },
            error: function (message) {
                response([]);
            }
        });
    },
    minLength: 2
});

看起来这个没问题。事实上，我的关键词是唯一的，所以我不需要ID。

- ESDictor

---

我认为解决问题的方法是调用 JSON.parse。 - Andrew Whitaker

Answer 2

一个小小的帮助，可能会有用：

如果你使用的是json，在某些情况下，“json对象”可能没有被解析，或者你已经错误地用其他内容覆盖了变量（就像我最近愚蠢地做的一样）。

对于第一个问题，请确保您的服务器知道“application/json” MIME类型，否则请使用header（对于PHP）

我的意思是，在PHP中，首先应该使用以下代码：

header("Content-type: application/json");

- Nereo Costacurta

---

感谢@NereoCostacurta。我也曾经为同样的错误苦恼了很长时间，我的服务器端代码是用ColdFusion编写的。因此，在我的脚本顶部使用<cfcontent type="text/json">立即解决了这个问题。 - PeterKA

哇塞，谁说了PHP的事情？ - Adam Fowler

@AdamF 问题可能来自任何地方。如果你只是在PHP中回显JSON，但没有设置正确的头部，即使你指定了数据类型为JSON，jQuery也可能无法解析通过ajax检索到的对象。顺便说一下，这是一个来自2014年1月的旧答案，不知道当前的jQuery是否更好地处理了解析。 - Nereo Costacurta

Answer 3

在这行代码中，不要写 data.keywords ，而是用 JSON.parse(data) 替换：response($.map(data.keywords, function (item) {。

敬礼， 哈泽姆

- Hazem Fergany

---

这需要一些整理，例如包括完整的代码示例；使用正确的缩进并详细解释您的答案。另外作为一个提示，请不要签署您的答案。 - Ashley Medway

Answer 4

这里是如何使用源属性的函数

source:function(request,response) {
    var url = "your url";
    var postdata = "your data"; // normally you might use request.term to get the current user input
    $.ajax({url:url,data:postdata,success:function(responsedata){
        response($.parseJSON(responsedata))
    }});
}

响应函数接受JSON对象数组

- Mangesh Jadhav