ASP.NET JQuery-UI自动完成不工作
我有一个ASP.NET 4.5 WebForm应用程序,我想在其中添加自动完成到文本框。 我正在调查jquery-ui,但我似乎无法使其工作。ASP.NET JQuery-UI自动完成不工作
我正在使用jquery 3.1.1和jquery-ui 1.12.1。这是我的aspx页面的头部分。
ASPX
<head runat="server">
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#SearchDynamicTxt").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "UserReports.aspx/GetUsers",
data: "{'term':'" + $("#SearchDynamicTxt").val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
});
</script>
</head>
这里是文本控件:
<asp:TextBox ID="SearchDynamicTxt" runat="server" OnTextChanged="SearchDynamicTxt_TextChanged" AutoPostBack="true" ></asp:TextBox>
这里是后面的代码:
[WebMethod]
public static string[] GetUsers(string term)
{
List<string> usersList= new List<string>();
string CS= ConfigurationManager.ConnectionStrings["UsersCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
con.Open();
SqlCommand cmd = new SqlCommand("SELECT Name FROM Customers WHERE Name Like '" + term + "%'", con);
SqlDataReader reader = cmd.ExecuteReader();
while(reader.Read())
{
usersList.Add(reader[0].ToString());
}
}
return usersList.ToArray();
}
我敢肯定有东西,我忘了或拼写错误,但我不知道什么或在哪里。当我尝试在控件中写一些东西时,没有任何反应。我希望它向我展示一个可能的匹配用户列表,当我选择其中一个时,可以调用方法OnTextChanged。
更新!
现在,下拉列表显示出来了,我想选择一个用户和那个选择来触发OnChanged方法。目前这没有发生。我需要按回车或点击页面上的某个地方生成回传,然后检测OnChanged文本。我猜我需要改变这一点:
success: function (data)
{
response(data.d);
},
也许增加一个事件参数或什么?我目前正在寻找解决方案,但如果有人知道答案,直到我找到它,请分享它。
谢谢!
它是如何,我奋斗2天修复某些东西和失败,但张贴在计算器我发现在5分钟内:))
的问题是,我是想用访问文本框中的答案后, $(“#SearchDynamicTxt”),但文本框在一个LoginView中。
所以我改成了:
$("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>")
现在,它完美的作品!
找到了UPDATE 2的答案。 原来我需要在自动完成(而不是AJAX)编写如下:
select: function (event, ui)
{
$("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>").trigger("change");
}
希望这有助于其他人被卡住,好像我是。
您也可以在控件中使用'ClientIDMode =“Static”'来防止ASP.net更改ID。 – SeanKendle
data: "{'term':'" + $("#SearchDynamicTxt").val() + "'}",
这里的问题,因为jQuery不直接找asp.net元素,所以你需要办理以下
$('#<%=SearchDynamicTxt.ClientID %>').val()
其工作
它不适用于我的情况,因为文本框位于LoginView内部,所以如果您使用SearchDynamicTxt.ClientID,它会说它在当前上下文中不存在。尝试添加一个LoginView并把文本框放在里面,你会明白我的意思。 – Cosmos24Magic
试试这个:
data: "{'term':'" + request.term + "'}",
你需要在文本框中添加这些OnTextChanged =“SearchDynamicTxt_TextChanged”AutoPostBack =“true”? –