AutoCompleteExtender with Progress Image

In last article i discussed about how to use AutoCompleteExtender,Now i am going to show here how to show progress image while retrieving results from DataBase,It is more use full if the DataBase Contains large no of records.





» Now create a website » Add TextBox » Add AutoCompleteExtender ass follows..

 <asp:TextBox ID="txtCity" runat="server">asp:TextBox><img id="loading" style="visibility:hidden" src="ajaxloader-thumb.gif" />

         <ac:AutoCompleteExtender ID="AutoCompleteExtender1" EnableCaching="true"

       BehaviorID="AutoCompleteEx" TargetControlID="txtCity"

       ServiceMethod="GetCities" MinimumPrefixLength="1"  

        onclientpopulating="ShowIcon"

        OnClientPopulated="ShowIcon"

       CompletionSetCount="10"                 CompletionListItemCssClass="autocomplete_completionListElement"        CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

        CompletionListCssClass="autocomplete_listItem"

       runat="server" FirstRowSelected="true" >

       <ac:AutoCompleteExtender>

» onclientpopulating="ShowIcon" this make progress image visible

» onclientpopulated="ShowIcon" this make progress image hide

» Now add the flowing JavaScript in Head section

<script type="text/javascript">

function ShowIcon() {

    var e = document.getElementById("loading");

    e.style.visibility =  (e.style.visibility == 'visible') ? 'hidden' : 'visible';

}          

<script>

» If your DataBase contains less no records then you can't able to see the effect of the progress image for this just add the following line..

System.Threading.Thread.Sleep(3000);

See the last article to understand completely How To Use Ajax AutoCompleteExtender in Asp.Net

happy coding