jquery 中的自动完成功能不起作用

Question

我正在使用 json 结果来填充文本框，我可以看到使用警报将值返回到 Razor 视图。但是我无法将它们绑定到文本框。

在我的 layout.cshtml 中，我正在加载 jquery 文件。 ![这是在我的布局页面的页眉部分][1]

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/jquery-ui")

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/Site")

这是我的索引文件，

$("#usersearch").change(function () {
        //$('#SearchVendorId').val(0);
        if ($('#usersearch').val() != "") {
            $('#usersearch').addClass("errorTextBox");
            $('#usersearch').removeClass("successTextBox");
        }
        else {
            $('#usersearch').removeClass("successTextBox");
            $('#usersearch').removeClass("errorTextBox");
        }
    });


    $('#usersearch').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetUsers")',
                data: { term: request.term },
                dataType: 'json',
                type: 'GET',
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                   response($.map(data, function (item) {
                       alert(item.value);
                        return {
                            label: item.value,
                            value: item.value
                        };
                    }));
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            });
        },
        minLength: 2
    });

非常感谢任何帮助。

Answer 1

您还没有发布您的数据响应，但如果它是一个字符串数组，则应该执行以下操作。

success: function (data) {
    response(data);                 
},

由于您已经以所需的格式（标签和值）提供了数据，因此您不必映射数据。只需将其直接传递到响应中即可。

Answer 2

$("#usersearch").change(function () {
    //$('#SearchVendorId').val(0);
    if ($('#usersearch').val() != "") {
        $('#usersearch').addClass("errorTextBox");
        $('#usersearch').removeClass("successTextBox");
    }
    else {
        $('#usersearch').removeClass("successTextBox");
        $('#usersearch').removeClass("errorTextBox");
    }
});


$('#usersearch').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetUsers")',
            data: { term: request.term },
            dataType: 'json',
            type: 'GET',
            async : false,
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
               response($.map(data, function (item) {
                   alert(item.value);
                    return {
                        label: item.value,
                        value: item.value
                    };
                }));
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });
    },
    minLength: 2
});

尝试 ajax

中的 async:false

jquery 中的自动完成功能不起作用

autocompletion in jquery not working

c#

asp.net-mvc

jquery

autocomplete

razor