按钮单击事件后调用jquery自动完成

Question

我想调用 jquery 自动完成功能，但在单击按钮后。在按钮单击事件中，gridview 和文本框可见，否则它们不可见。

下面是我的代码 脚本

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

    }

问题是在搜索操作的按钮单击事件自动完成（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
    });
});