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); 
},

也许增加一个事件参数或什么？我目前正在寻找解决方案，但如果有人知道答案，直到我找到它，请分享它。

谢谢！

你需要在文本框中添加这些OnTextChanged =“SearchDynamicTxt_TextChanged”AutoPostBack =“true”？ –

答

它是如何，我奋斗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 + "'}",

ASP.NET JQuery-UI自动完成不工作

相关推荐