Auto-complete jquery call after button click event

Question

I want to call the jquery autocomplete function, but after clicking a button. If you click the gridview button and the text field is visible, they are also invisible.

Below is my Script code

$(document).ready(function () { SearchText(); }); function SearchText() { $(".autosuggest").autocomplete({ source: function (request, response) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "CalendarDetails.aspx/GetAutoCompleteData", data: "{'Col3':'" + document.getElementById('txtSearch').value + "'}", dataType: "json", success: function (data) { response(data.d); }, error: function (result) { alert("Error"); } }); } }); } 

HTML

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:Label ID="Label4" runat="server" Text="ID" Font-Bold="True"></asp:Label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> <br /> <br /> <asp:Label ID="Label1" runat="server" Text="Start Date" Font-Bold="True"></asp:Label> <input type="text" id="datepickerStart" runat="server" /> &nbsp; <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="datepickerStart" ErrorMessage="*Mandatory field" ForeColor="Red"></asp:RequiredFieldValidator> <br /> <br /> <asp:Label ID="Label2" runat="server" Text="End date" Font-Bold="True"></asp:Label> &nbsp; &nbsp; <input type="text" id="datepickerEnd" runat="server" /> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="datepickerEnd" ErrorMessage="*Mandatory field" ForeColor="Red"></asp:RequiredFieldValidator> <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> <br /> <br /> <br /> <br /> <br /> <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /> 

EDIT

 <input type="text" id="txtSearch" class="autosuggest" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" > <ContentTemplate> <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label> &nbsp;&nbsp;&nbsp; <br /> <br /> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound"> <HeaderStyle BackColor="#FFCC99" /> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="PageIndexChanging" /> <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" /> </Triggers> </asp:UpdatePanel> <br /> <br /> <br /> </div> 

Code for

 [WebMethod] public static List<string> GetAutoCompleteData(string Col3) { List<string> result = new List<string>(); if ((dtClone != null) && (dtClone.Rows.Count > 0)) { DataRow[] foundRows; string expression = "Col3 LIKE '%" + Col3 + "%'"; // Use the Select method to find all rows matching the filter. foundRows = dtClone.Select(expression); for (int i = 0; i < foundRows.Length; i++) result.Add(foundRows[i][2].ToString()); } return result; } 

The problem is that the autocomplete of the button click event (jquery) for the search operation does not work. Please help me what the problem is. Where am i wrong

Answer 1

Looking at your code, it looks like the search text box is outside the update panel. Therefore, the following code should work:

 $(document).ready(function () { $(".autosuggest").autocomplete({ source: function (request, response) { var col3 = $("#txtSearch").val(); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "CalendarDetails.aspx/GetAutoCompleteData", data: { Col3: JSON.stringify(col3) }, dataType: "json", success: function (data) { response(data.d); }, error: function (result) { alert("Error"); } }); }, }); }); 

If the search text field is inside the update panel, it will be loaded via ajax, and you must bind the jquery event to the DOM element above the update panel.

The update panel enclosed inside a div:

 <div id="someDivOutsideUpdatePanel"> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" > <input type="text" id="txtSearch" class="autosuggest" /> </asp:UpdatePanel> </div> 

Bind an event to a div:

 $(document).ready(function () { $("#someDivOutsideUpdatePanel .autosuggest").autocomplete({ // Same code as above }); });