c# - Jquery 自动完成扩展程序在回发后无法正常工作

Question

我在 ASP.Net 中使用 Web 服务使用 jQuery 自动完成功能。我使用自动完成功能来过滤员工代码。当页面加载时自动完成功能正常，但是当我单击搜索按钮后自动完成功能无法正常工作。

我认为问题在于 document.ready 函数，所以当页面加载时它工作正常，但我也必须在按钮单击事件后使用自动完成。 我该怎么做？？？

这是我的 jQuery 自动完成

<link href="../AutoComplete/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../AutoComplete/jquery.min.js" type="text/javascript"></script>
<script src="../AutoComplete/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#<%=txtEmpcode.ClientID %>").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/MyWebService.asmx/FetchEmpCode") %>',
                data: "{ 'Empcode': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[1],
                            //val: item
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        minLength: 1
    });
});
</script>

标记

<td align="right">
<asp:Label ID="lblEmpCodeSrch" runat="server" Text="EmpCode" CssClass="label">   </asp:Label>
 </td>
 <td>
  <asp:TextBox ID="txtEmpCodeSrch" runat="server" Width="250px" ToolTip="Enter Employeecode"></asp:TextBox>
   &nbsp;&nbsp;<asp:Button ID="bttnSearch" runat="server" CssClass="submit" Height="23px" Text="Search" onclick="bttnSearch_Click" />
  </td>

ButtonSearch 代码隐藏

protected void bttnSearch_Click(object sender, EventArgs e)
{
    clsEmp.EMPLOYEEID =txtEmpCodeSrch.Text.Trim()==""?                                                                                   0:Convert.ToInt32(hFieldEmpId.Value);
    DataTable dtEmp = clsEmp.GetDetails();
    if (dtEmp.Rows.Count > 0)
    {
        hFieldEmpId.Value = "";
       // txtEmpCodeSrch.Text = "";
        if (ViewState["Sort"] != null)
        {
            DataView dView = new DataView(dtEmp);
            dView.Sort = ViewState["Sort"].ToString();
            gdView.DataSource = dView;
            gdView.DataBind();
        }
        else
        {
            gdView.DataSource = dtEmp;
            gdView.DataBind();
        }
    }
}

Answer 1

当你有一个UpdatePanel，数据更新后，你还需要重新初始化javascript，因为旧的已经不能用了，因为你的html页面的struct变了，dom变了。

UpdatePanel 提供了一些在客户端执行此操作的功能，您的代码如下:

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the autocomplete
       InitAutoCompl();
    });        

    function InitializeRequest(sender, args) {
    }

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

   function InitAutoCompl() {
      $("#<%=txtEmpcode.ClientID %>").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/MyWebService.asmx/FetchEmpCode") %>',
                data: "{ 'Empcode': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[1],
                            //val: item
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        minLength: 1
   });
  }    
  </script>