Here I’ll explain how to display animated loading GIF image while the AJAX AutoComplete Extender populates the AutoComplete items.
I have already explained in past how to use ASP.Net AutoComplete Extender in ASP.Net, you can refer than article using the link below.
ASP.Net AJAX Control Toolkit AutoCompleteExtender without using Web Services
HTML Markup
Below is the HTML Markup of the page.
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" MinimumPrefixLength="2"
CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtContactsSearch"
ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false" OnClientHiding="OnClientCompleted"
OnClientPopulated="OnClientCompleted" OnClientPopulating="OnClientPopulating">
</cc1:AutoCompleteExtender>
</div>
Above I have added an ASP.Net AJAX AutoCompleteExtender with three client side events OnClientHiding, OnClientPopulated and OnClientPopulating. These events are used to display the loading GIF image when the call is made to search the records and also hides it when the records are populated. The client side methods called on these events are described below.
Client Side Methods
<script type="text/javascript">
function OnClientPopulating(sender, e) {
sender._element.className = "loading";
}
function OnClientCompleted(sender, e) {
sender._element.className = "";
}
</script>
The OnClientPopulating method gets called on the OnClientPopulating and displays the loading GIF image by applying the “loading” CSS class to the textbox control. While the method OnClientCompleted gets called on the OnClientHiding and OnClientPopulated events and simply removes the CSS class so that the loading GIF image can be hidden.
CSS
Below is the CSS that you need to add to your page in the HEAD section or CSS class in order to display the loading GIF image when the ASP.Net AJAX Control Toolkit AutoCompleteExtender fetches the records.
<style type="text/css">
.loading
{
background-image: url(images/loader.gif);
background-position: right;
background-repeat: no-repeat;
}
</style>
With this we come to the end of this article. Hope you liked it. You can download the source using the link below.
AutoCompleteExtender_DisplayLoadingImage.zip