How to Display Loading Image with AJAX-Auto Complete

After long time I had a chance to update my Blog.

In this post I’m going to show you how to display data fetching progress with AJAX Auto Complete extender.

This is very simple.

1. Add ASP Text box to the page (ID=TextBox1)
2. Add AJAX AutoCompleteExtender
3. Insert following javascript code to the web page
   

   <script type="text/javascript">

       function ShowImage() {

           document.getElementById('TextBox1')

                .style.backgroundImage = 'url(images/loader.gif)';

           document.getElementById('TextBox1')

                              .style.backgroundRepeat = 'no-repeat';

           document.getElementById('TextBox1')

                              .style.backgroundPosition = 'right';

       }

       function HideImage() {

           document.getElementById('TextBox1')

                                .style.backgroundImage = 'none';

       }

   ript>

   
   
   
   
4. Set OnClientPopulating=ShowImage and OnClientPopulated=HideImage events of AutoCompleteExtender. Complete markup as below.
   
   
   
   
   

   <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"  

       DelimiterCharacters="" Enabled="True" ServicePath="WebService1.asmx" TargetControlID="TextBox1"

       ServiceMethod="GetCompletionList" MinimumPrefixLength="2"

       OnClientPopulating="ShowImage" OnClientPopulated="HideImage"  />