jQuery自动完成不显示数据

Posted 2023-05-08

【中文标题】jQuery自动完成不显示数据

【英文标题】：jQuery autocomplete not displaying data

【发布时间】：2018-01-15 21:51:13

【问题描述】：

我正在尝试在我的 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】：

应该是这样的

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>