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