How to show progress indicator for AutoComplete Extender in ASP.NET

In ASP.NET if we want to show autocomplete suggestion in a textbox (e.g: In Google when we start  typing something it shows us a list of suggestion depending on the words / letters we have typed), then we can use AjaxControl Toolkit’s AutoComplete Extender.

Generally AutoComplete Extender does an Ajax call to ASP.NET Webmethod and gets the result / suggestion. In the process of making an Ajax call and getting response if we want to show a progress indicator inside the textbox then how we can do that?

The solution is described below:
AjaxControl Toolkit’s AutoComplete extender has three properties named-

OnClientPopulating =”suggestionListPopulating”

OnClientPopulated=”suggestionListPopulated”

OnClientHidden=”suggestionListPopulated”

We have assigned three JavaScript event handlers to the above three properties.

OnClientPopulating event handler will be called when the Ajax call to the WebMethod is made.

OnClientPopulated event handler will be called when the suggestion list is populated.

OnClientHidden event handler will be called when the the suggestion list becomes invisible / hidden. So we will show a loading image when the Ajax call is instansiated and will hide the image when the suggestion list is populated or when the suggestion list is made hidden (if no items are found for suggestion).

function suggestionListPopulating(source, e)

{
 
     var textboxControl = $(source.get_element()); // Get the textbox control.
 
    textboxControl.css('background', '#FFF url(Images/textbox-loader.gif) no-repeat right'); // Put a background image for the textbox.
}
 
 
function suggestionListPopulated(source, e)
 
{
 
     var textboxControl = $(source.get_element()); // Get the textbox control.
 
    textboxControl.css('background-image', 'none'); // Remove background image from the textbox.
}