按钮单击事件后，请致电jQuery自动完成

Question

我想调用jQuery自动完成功能，但单击按钮后。在按钮单击事件中，GridView和Textbox可见，否则它们是看不见的。

以下是我的代码脚本

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

编辑

<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>

背后的代码

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

问题是在按钮单击事件AutoComplete（jQuery）搜索操作不起作用。请帮助我问题所在。我错了

Answer 1

查看您的代码，看起来您的搜索文本框在更新面板外面。因此，以下代码应起作用：

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

如果搜索文本框在更新面板内部，则将通过AJAX加载，您必须将jQuery事件绑定到更新面板上方的DOM元素。

更新面板包裹在DIV中：

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

将事件绑定到DIV：

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