jQuery UI Autocomplete JSON给出错误：Uncaught TypeError：无法使用'in'运算符来搜索'62'

I am having a great deal of trouble getting autocomplete to work on my page. When I enter 2 characters ("OW") into my search input, I get the preloader image (see below), but it never goes away and I never get the autocomplete popup. Looking at the console in Chrome shows:

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

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

Here is the actual string that is being returned (confirmed by adding an alert(data) in the success block):

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

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

Here is the main code for the autocomplete

这是自动完成的主要代码

$("#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
});

And finally, here is the preloader (just in case it's related).

最后，这里是预加载器（以防它是相关的）。

$(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();
});

Can anyone help to explain what's going on here?

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

4 个解决方案

#1

It was a long road, but after many hours of experimenting I came up with this code:

这是一条漫长的道路，但经过几个小时的实验，我想出了这段代码：

$("#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
});

This appears to work fine. The truth is my keywords are unique, so I can live without the ID anyway.

这似乎工作正常。事实是我的关键字是独一无二的，所以无论如何我都可以没有身份证。

#2

a little help that can be useful:

一点点有用的帮助：

if you're using json, it might be that the "json object" isn't parsed, or you've overwritten the variable with others tings (like what I did stupidly recently).

如果你正在使用json，可能是因为“json对象”没有被解析，或者你已经用其他东西覆盖了变量（就像我最近做的那样愚蠢）。

for the first problem, be sure that your server know "application/json" MIME type, else use header (for PHP)

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

I mean, in PHP, use this before all:

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

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

#3

here how you use the function for the source property

如何将该函数用于source属性

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

The response function accepts array of JSON objects

响应函数接受JSON对象数组

#4

instead of writing replace data.keywords with JSON.parse(data) at this line : response($.map(data.keywords, function (item) {.

而不是在这一行用JSON.parse（data）编写替换data.keywords：response（$。map（data.keywords，function（item）{。

BR, Hazem

BR，Hazem

#1