Jquery Auto complete extender not working after postback

Question

Im using jQuery Autocomplete using Web Service in ASP.Net.I've used the autocomplete to filter employeecode.When the page loads autocomplete works fine,but after when i click the search button autocomplete is not working properly.

I think the problem lies in document.ready function,so when the page loads it works fine,But i've to use autocomplete after the buttonclick event also. How can i do this ???

Heres my jQuery Autocomplete

<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>

Markup

<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

When you have an UpdatePanel, after the update of the data, you also need to re-initialize the javascript, because the old one is not longer working, because the struct of your html page have change, the dom have change.

The UpdatePanel is giving some function to do that on client side, and your code will be as:

<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>