jquery中的自动完成无法正常工作

时间:2015-05-28 16:35:31

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

我使用json结果填充文本框,我可以看到使用alert将值返回到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
    });

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

您尚未发布数据响应,但如果是数组字符串,则应执行以下操作。

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

由于您已经以所需的格式(标签和值)提供了数据,因此您不必映射数据。只需将其直接传递给回复。