Call jquery autocomplete after button click event

Question

I want to call a jquery autocomplete function but after a button click. In button click event gridview and textbox are visible else they are invisible.

Below are my code Script

 $(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 behind

[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 after button click event autocomplete(jquery) for search operation is not working. Please help me where is the issue. Where I am wrong

Answer 1

Looking at your code it looks like your search text box is outside the update panel. So 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");
                }
            });
        },      
    });
});

In case the search textbox is inside the update panel then it will be loaded via ajax and you have to bind the jquery event to a DOM element above the update panel.

Update Panel wrapped 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 the event to the div:

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