4

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

我认为问题在于 document.ready 功能，所以当页面加载时它工作正常，但我也必须在 buttonclick 事件之后使用自动完成。我怎样才能做到这一点 ？？？

这是我的 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();
        }
    }
}
4

2 回答 2

20

当你有一个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>
于 2012-09-24T19:37:05.167 回答
-1

我告诉你，我可以通过在 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>
于 2016-10-05T15:37:34.407 回答