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

也許增加一個事件參數或什麼？我目前正在尋找解決方案，但如果有人知道答案，直到我找到它，請分享它。

謝謝！

來源

2017-07-14 Cosmos24Magic

你需要在文本框中添加這些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"); 
}

希望這有助於其他人被卡住，好像我是。

來源

2017-07-14 07:33:49 Cosmos24Magic

您也可以在控件中使用'ClientIDMode =「Static」'來防止ASP.net更改ID。 – SeanKendle

data: "{'term':'" + $("#SearchDynamicTxt").val() + "'}",

這裏的問題，因爲jQuery不直接找asp.net元素，所以你需要辦理以下

$('#<%=SearchDynamicTxt.ClientID %>').val()

其工作

來源

2017-07-14 07:35:58

它不適用於我的情況，因爲文本框位於LoginView內部，所以如果您使用SearchDynamicTxt.ClientID，它會說它在當前上下文中不存在。嘗試添加一個LoginView並把文本框放在裏面，你會明白我的意思。 – Cosmos24Magic

試試這個：

data: "{'term':'" + request.term + "'}",

來源

2017-07-14 13:33:39 Jigs17

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

回答

相關問題