jQuery autocomplete渲染SQL数组 / NOT TEXTBOX选择



尝试使基本的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>

由于它正在使用一个硬编码的数组,因此我的怀疑是在您的Web服务中的响应格式上。正如我从评论中知道的那样

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

最新更新