jQuery自动完成不显示数据

时间:2017-08-08 10:54:49

标签: jquery asp.net autocomplete

我正在尝试在我的asp.net应用程序中对用户名使用自动完成功能。我正在检索名称&数据库中的关联id。我已经检查过它正在工作,我的后端代码将数据返回到前端。但它没有显示在自动填充字段中。这是我的剧本:

 <script type="text/javascript">
        $(document).ready(function () {
            autocomplete();
        });
        function autocomplete() {
            $("[id$=txt_name]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("../Services/AutoComplete.asmx/getCustomerDetails") %>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustId]").val(i.item.val);
                    $("[id$=txt_name]").change();

                    return false;
                },
                minLength: 1
            });
        };
    </script>

1 个答案:

答案 0 :(得分:0)

应该是这样的

response($.map(data.d, function (item) {
                                    return {
                                        label: item.split('-')[0],
                                        value: item.split('-')[1]
                                    }
                                }))

<script type="text/javascript">
        $(document).ready(function () {
            autocomplete();
        });
        function autocomplete() {
            $("[id$=txt_name]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("../Services/AutoComplete.asmx/getCustomerDetails") %>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    value: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustId]").val(i.item.val);
                    $("[id$=txt_name]").change();

                    return false;
                },
                minLength: 1
            });
        };
    </script>