jQuery UI Autocomplete JSON 给出错误：Uncaught TypeError: Cannot use 'in' operator to search '62' in

Posted 2023-03-05

【中文标题】jQuery UI Autocomplete JSON 给出错误：Uncaught TypeError: Cannot use \'in\' operator to search \'62\' in

【英文标题】：jQuery UI Autocomplete JSON gives error: Uncaught TypeError: Cannot use 'in' operator to search for '62' injQuery UI Autocomplete JSON 给出错误：Uncaught TypeError: Cannot use 'in' operator to search '62' in

【发布时间】：2013-02-04 15:58:12

【问题描述】：

我在让自动完成功能在我的页面上工作时遇到了很多麻烦。当我在搜索输入中输入 2 个字符（“OW”）时，我得到了预加载器图像（见下文），但它永远不会消失，我也永远不会得到自动完成弹出窗口。查看 Chrome 中的控制台显示：

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

这是正在返回的实际字符串（通过在成功块中添加警报（数据）来确认）：

["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();
);

谁能帮忙解释一下这里发生了什么？

【参考方案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。

【讨论】：

我认为解决它的是JSON.parse 调用。

【参考方案2】：

一点有用的帮助：

如果您使用的是 json，则可能是“json 对象”没有被解析，或者您已经用其他内容覆盖了变量（就像我最近愚蠢地做的那样）。

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

我的意思是，在 PHP 中，首先使用这个：

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

【讨论】：

感谢@NereoCostacurta。为同样的错误挣扎了很长一段时间；我的服务器端代码在 ColdFusion 中。因此，在我的脚本顶部使用<cfcontent type="text/json"> 立即解决了这个问题。

哇，Nelly，谁说过 PHP 的事

@AdamF 问题可能来自任何地方。如果您只是在 php 中回显 json，但没有设置正确的标头，则 jquery 可能无法解析 ajax 检索到的对象，即使您将数据类型指定为 JSON。顺便说一句，这是 2014 年 1 月的旧答案，不知道当前的 jquery 现在是否能更好地处理解析。

【参考方案3】：

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

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 对象数组

【参考方案4】：

不要在这一行用JSON.parse(data)替换data.keywords：response($.map(data.keywords, function (item) 。

BR, 雾霾

【讨论】：

这需要整理一下，例如包含完整的代码示例；使用正确的缩进并完整地解释你的答案。也不要在你的答案上签字。