Question

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

我认为问题在于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 Codebehind

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页面的结构发生了变化，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>

Answer 2

我告诉您，我可以通过在UpdatePanel标记中添加触发器来解决问题，从而在我的情况下实现所需的行为。我希望你能帮助我，为你服务。

<ajax:UpdatePanel>
    <ContentTemplate>
        //My label fire autocomplete
        <asp:TextBox id="MyLabelForAutoComplete" runat="server"/>
        // Other Html Tags...

    <Triggers>
        <ajax:PostBackTrigger ControlID="MyLabelForAutoComplete">
    </Triggers>
</ajax:UpdatePanel>

Jquery Auto完全扩展程序在回发后无法正常工作

2 个答案: