2017-07-14 5 views
0

Ich habe eine ASP.NET 4.5 WebForm-App, wo ich Autocomplete zu einer TextBox hinzufügen möchte. Ich schaute in jQuery-Ui, aber ich kann nicht scheinen, damit es funktioniert.ASP.NET JQuery-UI Autocomplete funktioniert nicht

Ich benutze jquery 3.1.1 und jquery-ui 1.12.1. Hier ist der Kopf meiner Aspx-Seite. Hier

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> 

ist der Text Kontrolle:

<asp:TextBox ID="SearchDynamicTxt" runat="server" OnTextChanged="SearchDynamicTxt_TextChanged" AutoPostBack="true" ></asp:TextBox> 

Hier ist der Code hinter:

[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(); 
     } 

Ich bin sicher, es ist etwas, das ich vergessen oder falsch geschrieben, aber ich weiß nicht weiß was oder wo? Wenn ich versuche, etwas in die Steuerung zu schreiben, passiert nichts. Ich möchte, dass es mir eine Liste von möglichen passenden Benutzern zeigt und wenn ich eines von ihnen auswähle, um die Methode OnTextChanged aufzurufen.

UPDATE!

Jetzt, da die Dropdown-Liste angezeigt wird, möchte ich einen Benutzer und diese Auswahl auswählen, um die OnChanged-Methode auszulösen. Momentan passiert das nicht. Ich muss die Eingabetaste drücken oder irgendwo auf die Seite klicken, um ein Postback zu erzeugen, und dann erkennt es den OnChanged-Text. Ich schätze, dass ich das ändern muss:

success: function (data) 
{ 
    response(data.d); 
}, 

Vielleicht einen Ereignisparameter oder etwas hinzufügen? Ich suche zurzeit nach der Lösung, aber wenn jemand die Antwort kennt, bis ich es finden kann, teilen Sie es bitte.

Vielen Dank!

+0

benötigen Sie diese OnTextChanged = "SearchDynamicTxt_TextChanged" AutoPostBack = "True" auf Ihrem Textfeld? –

Antwort

0

Wie kommt es, dass ich für 2 Tage kämpfen, etwas zu reparieren und scheitern, aber nach über die Entsendung Stackoverflow ich die Antwort in 5 Minuten finden :))

Das Problem war, dass ich die Textbox zuzugreifen versuche, mit $ ("# SearchDynamicTxt"), aber das Textfeld befindet sich in einer LoginView. So

habe ich es mit:

$("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>") 

Jetzt funktioniert es perfekt !!!

Die Antwort für UPDATE 2 gefunden. Stellt sich heraus, ich in der Autovervollständigung schreiben benötigt (nicht die Ajax) die folgenden:

select: function (event, ui) 
{ 
    $("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>").trigger("change"); 
} 

Hope this anderen hilft, die stecken geblieben sind, wie ich war.

+0

Sie können auch 'ClientIDMode =" Static "' im Steuerelement verwenden, um zu verhindern, dass ASP.net die ID ändert. – SeanKendle

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

hier ist das Problem, weil jquery nicht das asp.net Element direkt nicht finden, so dass Sie

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

folgenden anwenden müssen ihre Arbeits

+0

Es funktioniert nicht in meinem Fall, weil das Textfeld in einem LoginView ist, wenn Sie also SearchDynamicTxt.ClientID verwenden, wird es sagen, dass es im aktuellen Kontext nicht existiert. Versuchen Sie, eine LoginView hinzuzufügen und die Textbox darin zu platzieren und Sie werden sehen, was ich meine. – Cosmos24Magic

0

versuchen Sie dieses:

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