Ajax Autocomplete textbox add progress Image using javascript

This article demonstrates in a step by step fashion how to use the AjaxControl ToolKit’s AutoCompleteExtender control with an animated gif progress indicator while the target dropdown of the AutoCompleteExtender is waiting to be loaded.

This approach works if you are using newer versions of AjaxControlToolkit.dll (Version 1.0.20229.20821 or later)

For this write the below mentioned javascript in head section of html markup of the aspx page :

<script type="text/javascript">

 function ShowImage() 

{  document.getElementById('txtAutoComplete').style.backgroundImage = 'url(images/loader.gif)';

   document.getElementById('txtAutoComplete').style.backgroundRepeat= 'no-repeat'; 

   document.getElementById('txtAutoComplete').style.backgroundPosition = 'right'; 

}

 function HideImage()

 {

   document.getElementById('txtAutoComplete').style.backgroundImage  = 'none';

 }

  script>

For this write the above mentioned javascript in head section of html markup of page.
Now in source of autocomplete extender add onclientpopulating="ShowImage" andonclientpopulated="HideImage" 

<ajaxToolkit:AutoCompleteExtender

 runat="server"

 ID="AutoComplete1"

 BehaviorID="autoComplete"

 TargetControlID="txtAutoComplete"

 ServicePath="AutoComplete.asmx"

 ServiceMethod="GetCompletionList"

 MinimumPrefixLength="1"

 CompletionInterval="10"

 EnableCaching="true" 

 CompletionSetCount="12"

 CompletionListCssClass="autocomplete_completionListElement"

 CompletionListItemCssClass="autocomplete_listItem"

 CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

 onclientpopulating="ShowImage"

 onclientpopulated="HideImage"

ajaxToolkit:AutoCompleteExtender>

Happy Coding......