In this article I will explain with an example, how to display loading GIF image when, ASP.Net AJAX Control Toolkit AutoCompleteExtender Control makes a call to the server to search the records and hide the image when the records are populated using JavaScript.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Installing ASP.Net AJAX Control Toolkit
First, you have to download and install the AJAX Control Toolkit DLL.
Note: For more details, please refer my article Install AJAX Control Toolkit in Visual Studio ToolBox.
 
 
Registering ASP.Net AJAX Control Toolkit
In order to use ASP.Net AJAX Control Toolkit controls, you will need to add reference of AJAX Control Toolkit Library and then register on the Page as shown below.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
 
HTML Markup
The following HTML markup consists of:
ToolkitScriptManager – For enabling Ajax.
TextBox – For user Input.
AutoCompleteExtender – For displaying autosuggestion list.
 
The AJAX Control Toolkit AutoCompleteExtender has the following properties:
ServiceMethod – The web service method to be called.
MinimumPrefixLength – Minimum number of characters to be entered.
CompletionInterval – Time to get suggestions. Here it is set in milliseconds. The default value is 1000.
CompletionSetCount – Number of suggestions to be displayed.
EnableCaching – Whether client side caching is enabled or not.
TargetControlID – The Id of the TextBox control.
FirstRowSelected – Determines if the first option in the AutoComplete list will be selected by default.
OnClientHiding – For triggering JavaScript event handler, for hiding the loading Image.
OnClientPopulated – For triggering JavaScript event handler, when items are populated in the AutoComplete list.
OnClientPopulating – For triggering JavaScript event handler, when items are populating in the AutoComplete list.
<cc1:ToolkitScriptManager ID="ToolkitScriptManager" runat="server"></cc1:ToolkitScriptManager>
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="SearchCustomers"
    MinimumPrefixLength="2" CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
    TargetControlID="txtContactsSearch" OnClientHiding="OnClientCompleted"
    OnClientPopulated="OnClientCompleted" OnClientPopulating="OnClientPopulating" FirstRowSelected="false">
</cc1:AutoCompleteExtender>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
 
VB.Net
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
 
 
Server Side Method
The following Web Method is used to populate the records from the Employees Table of the Northwind database.
This method accepts following parameters:
1. prefixText (string)
2. count (int)
Note: It is very important that you keep the signature of the method i.e. the name of the parameters are same as given, otherwise the method won’t work with AutoCompleteExtender.
 
The value of the FirstName and LastName fields along with the EmployeeId are inserted into a Generic List collection of string using the AutoCompleteExtender Item of ASP.Net AJAX Control Toolkit and then returned to the ASP.Net AJAX AutoCompleteExtender Control.
The EmployeeId will be used for displaying image of Employees at Client Side, while FirstName and LastName fields will be used to display the Name of the Employees in AutoCompleteList.
C#
[WebMethod]
public static List<string> SearchEmployees(string prefixText, int count)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        string query = "SELECT EmployeeId, FirstName, LastName FROM Employees WHERE FirstName LIKE @SearchText + '%'";
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            con.Open();
            List<string> employees = new List<string>();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    employees.Add(AjaxControlToolkit.AutoCompleteExtender
                        .CreateAutoCompleteItem(string.Format("{0} {1}", sdr["FirstName"], sdr["LastName"]), sdr["EmployeeId"].ToString()));
                }
            }
            con.Close();
 
            return employees;
        }
    }
}
 
VB.Net
<WebMethod>
Public Shared Function SearchEmployees(prefixText As String, count As Integer) As List(Of String)
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Dim query As String = "SELECT EmployeeId, FirstName, LastName FROM Employees WHERE FirstName LIKE @SearchText + '%'"
        Using cmd As SqlCommand = New SqlCommand(query, con)
            cmd.Parameters.AddWithValue("@SearchText", prefixText)
            con.Open()
            Dim employees As List(Of String) = New List(Of String)()
            Using sdr AsSqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    employees.Add(AjaxControlToolkit.AutoCompleteExtender _
                        .CreateAutoCompleteItem(String.Format("{0} {1}", sdr("FirstName"), sdr("LastName")), ("EmployeeId").ToString()))
                End While
            End Using
            con.Close()
 
            Return employees
        End Using
    End Using
End Function
 
 
Client Side Events
Following JavaScript events are used to display loading GIF image when, ASP.Net AJAX Control Toolkit AutoCompleteExtender Control makes a call to the server to search the records.
OnClientCompleted
Inside the OnClientCompleted event, the CSS class is removed, so that the loading GIF image is hidden.
 
OnClientPopulating
Inside the OnClientPopulating event, the CSS class is added, so that loading GIF image is displaying when, ASP.Net AJAX Control Toolkit AutoCompleteExtender Control makes a call to the server to search the records.
<script type="text/javascript">
    function OnClientPopulating(sender, e) {
        sender._element.className = "loading";
    }
 
    function OnClientCompleted(sender, e) {
        sender._element.className = "";
    }
</script>
 
 
Loading GIF CSS Class
Following CSS is used in this article for displaying the loading GIF image.
<style type="text/css">
    .loading
    {
        background-image: url(images/loader.gif);
        background-position: right;
        background-repeat: no-repeat;
    }
</style>
 
 
Screenshot
Display Animated Loading GIF Image in ASP.Net AJAX AutoCompleteExtender
 
 
Browser Compatibility

The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code