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 cl

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> 

Answer 2

I tell you that I could solve the problem by adding a Triggers within the UpdatePanel tag, thus achieves the desired behavior in my case. I hope you can serve you as me helped me.

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

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