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

【问题标题】：autocompletion in jquery not workingjquery中的自动完成功能不起作用
【发布时间】：2015-08-11 07:15:16
【问题描述】：

我正在使用 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
    });

非常感谢任何帮助。

【问题讨论】：

标签： c# jquery asp.net-mvc razor autocomplete

【解决方案1】：

你还没有发布你的数据响应，但是如果它是一个字符串数组，下面应该这样做。

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

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

【讨论】：

我正在使用 JSON 结果 [HttpGet] public JsonResult GetUsers(string term = "") { var e = new UserDataEntities(); var returner = (from a in e.Users where a.UserID.ToUpper().Contains(term.ToUpper().Trim()) select new { id = a.UserID, label = a.UserID.Trim(), value = a.UserID.Trim() }) .Take(20);返回 Json(returner, JsonRequestBehavior.AllowGet); }
请以格式化技巧为借口。对此相当陌生。
@coderfirst 不是问题:)。根据您的数据更新了我的答案。
感谢:)。但我在 item.value 看到错误提示“Expected ': '”
@coderfirst 抱歉，我根据另一篇文档再次更新了一次

【解决方案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

【讨论】：