javascript - JQuery 自动建议在搜索一次后不起作用

Question

我有一个搜索文本框，用户开始在其中输入内容，这会触发一些 JavaScript，该 JavaScript 运行一个方法来调用存储过程来查找供用户单击的建议文本。这在页面加载时效果很好。当用户从建议文本中选择一个项目并点击“搜索”时，下面的 GridView 已被相应过滤。但是，当用户返回搜索文本框搜索其他内容时，自动建议将不再起作用。似乎不明白为什么？只有当我刷新整个页面时它才会再次工作，因此丢失了过滤后的 GridView 。

.JS 文件:

    $(document).ready(function() {
    SearchColumn();


    document.onkeydown = function (e) {
        if (e.keyCode === 13) {
            document.getElementById('searching').click(); return false;
        }
    }


});

function SearchColumn() {
    $(".autosuggest").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Exception.aspx/GetAutoCompleteData",
                data: "{'ColumnName':'" + document.getElementById('exampleFormControlSelect1').value + "', 'SearchValue':'" + document.getElementById('SearchInput').value + "'}",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        response(data.d);
                    }
                },
                error: function (result) {

                alert(result);
                }
            }); 
        }
    });
}

ASPX:

  <asp:updatepanel runat="server">
    <ContentTemplate> 
    <asp:Panel ID="Panel1" runat="server">
     <div class="form-group">

         <label for="exampleFormControlInput1">Select column to search on: </label>
    <asp:DropDownList class="form-control" id="exampleFormControlSelect1" runat="server">
    <asp:ListItem Enabled="true" Text="Select Column" Value="-1"></asp:ListItem>
    <asp:ListItem Text="IRN" Value="IRN"></asp:ListItem>
    <asp:ListItem Text="Application Number" Value="ApplicationNumber"></asp:ListItem>
    <asp:ListItem Text="Measure Code" Value="MEASURECODE"></asp:ListItem>
    <asp:ListItem Text="Instructor" Value="Instructor"></asp:ListItem>
    <asp:ListItem Text="Overdue" Value="Overdue"></asp:ListItem>
    <asp:ListItem Text="Exception" Value="ExceptionDesc"></asp:ListItem>
    </asp:DropDownList>
    </div>

    <div class="input-group mb-3" runat="server">
    <asp:TextBox id="SearchInput" runat="server" class="form-control autosuggest" placeholder="Search" type="text"> </asp:TextBox>
     <div class="input-group-append" runat="server">
    <button class="btn btn-outline-secondary" id="searching" onserverclick="Search_Click" runat="server" type="button">Search</button>
    </div>
        </div>
 </asp:Panel>
        </ContentTemplate>
        </asp:updatepanel>

C#

[WebMethod]
public static List<string> GetAutoCompleteData(string ColumnName, string SearchValue)
{

    List<string> result = new List<string>();
    string connectionString = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
    SqlConnection cn = new SqlConnection(connectionString);
    SqlCommand cmd = new SqlCommand("[dbo].test", cn);
    cmd.CommandType = CommandType.StoredProcedure;
    cn.Open();
    cmd.Parameters.AddWithValue("@subteamno", SubTeam);
    cmd.Parameters.AddWithValue("@Column", ColumnName);
    cmd.Parameters.AddWithValue("@Search", SearchValue);
    SqlDataReader dr = cmd.ExecuteReader();

    while (dr.Read())
    {
        result.Add(dr[ColumnName].ToString());
    }

    result = result.Distinct().ToList();
    return result;




}

Answer 1

当您有 UpdatePanel 时，在回发时您必须重新初始化 javascript 对象。 UpdatePanel 提供了一些在客户端执行此操作的函数，您的代码如下:

$(document).ready(function() {      
    SearchColumn();
    document.onkeydown = function (e) {
        if (e.keyCode === 13) {
            document.getElementById('searching').click(); return false;
        }
    }
    var prm = Sys.WebForms.PageRequestManager.getInstance();    
    //prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);     
});

function EndRequest(sender, args) {
   // after update occur on UpdatePanel re-init the Autocomplete
   SearchColumn();
}