带有 JSON 结果的 JQuery 自动完成不起作用

Question

我正在使用 JQuery 自动完成来显示可用课程的列表。我正在做一个帖子以从服务器获取课程列表，我将数据处理为预期格式，并将其传递给自动完成功能。问题是它不起作用，除非我硬复制并粘贴值 newSource 并将它们粘贴到源中。 变量 newSource = ["Enc1001","ENC1002","Enc1003","ENC1101"....etc]。 从服务器获取数据的ajax post

//Auto complete for search box
$('#AdditionalSearch').on('input', function () {
    var source = [];
    var inputValue = $('#AdditionalSearch').val();
    if (inputValue !== '') { //the value is not empty, we'll do a post to get the data.
        url = "/Course/CourseSearch";
        $.ajax({
            method: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            cache: false,
            data: JSON.stringify({ "searchCourseValue": inputValue }),
            url: url,
            success: function (data) {
                if (data.Ok) {
                    var myData = JSON.parse(data.data);
                    var newSource = '[';
                    $.each(myData.ResultValue, function (index, item) {

                        if ((myData.ResultValue.length -1) == index)
                            newSource += '"' + item.Name+'"';
                        else
                            newSource += '"'+ item.Name + '",';
                    });
                    newSource += "]";
                    console.log(newSource);
                    source = newSource;
                }
                setNameAutoComplete(source);
            },
            error: function (jqXHR) {
                console.log(error);
            }
        });

    } else { //The user either delete all the input or there is nothing in the search box. 
            //The value is empty, so clear the listbox.
        setNameAutoComplete(source);
    }
});

//将源传递给自动完成函数

var setNameAutoComplete = function (data) {
    console.log(data);
    $('#AdditionalSearch').autocomplete({
        source: data
    });
}

这里有什么我遗漏的吗？

Answer 1

当您在代码中直接粘贴 newSource = ["Enc1001","ENC1002","Enc1003","ENC1101"....etc] 时，您正在构建一个数组对象。但是，在您的 success 方法中，您正在构建一个字符串（同一对象的字符串表示形式）。您想要做的是构建一个实际的数组。

        ...
        success: function (data) {
            if (data.Ok) {
                var myData = JSON.parse(data.data);
                var newSource = [];
                $.each(myData.ResultValue, function (index, item) {
                        newSource.push(item.Name);
                });
                console.log(newSource);
                source = newSource;
            }
            setNameAutoComplete(source);
        },
        ...