Question

试图让基本的jQuery自动完成工作。在VS 2017中通过WCF服务使用SQL Server。一切看起来都不错...... .aspx呈现正常，在文本框中输入1个字符，调试.svc正在触发，调试SQL函数并查看好数据抓取，调试jQuery并通过控制台日志查看返回该数组，通过控制台查看该数组随着文本框中输入的每个附加字符减少...但是在允许选择项目的页面上不会生成任何列表。奇怪。甚至用硬编码的国家/地区列表成功运行它并且它工作正常。包括jQuery和HTML，不包括.svc，因为它被确认为返回准确的值。

    <script>
$(document).ready(function () {
    BindControls();
});

function BindControls() {
   $("#txtMembers1").autocomplete({
        source: function (request, response) {

            var val = request.term;
            console.log(val);
            $.ajax({
                url: "searchMembers1.svc/getMembers",
                data: JSON.stringify({ sLookUP: val }),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            value: item }
                    }))
                    console.log(data)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2    // MINIMUM 1 CHARACTER TO START WITH.
    }); 

   /* var Countries = ["ARGENTINA", "AUSTRALIA", "BRAZIL", "BELARUS", "BHUTAN", "CHILE"];

    // BIND ARRAY OF STRINGS WITH AUTOCOMPLETE FUNCTION.
    $("#txtMembers").autocomplete({ source: Countries }); */


}

HTML -------

<head runat="server">
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

  <style type="text/css" >
    .ui-autocomplete { max-height: 150px; overflow-y: auto; overflow-x: hidden; font-size: 9pt; }
    * html .ui-autocomplete { height: 100px; }
</style>

</head>
<body>

<form name="frmSearch" runat="server">
    <div style="font:15px Arial;" >
    <b>Members</b>:  <input id="txtMembers1" type="text" runat="server" />
   <%--<b>Members</b>:  <asp:TextBox ID="txtMembers" runat="server" ></asp:TextBox>--%>
</div>

Answer 1

由于它使用的是硬编码阵列，我怀疑是你的网络服务的响应格式。正如我从评论中得知的那样，财产是＆＃39; d＆＃39;在您的响应中保存数据数组，因此您应该映射data.d而不是响应中的数据。

response($.map(data.d, function (item) { return { value: item } }))

jQuery自动完成呈现SQL数组/非文本框选择

1 个答案: