Home > AJAX, ASP.Net, Linq > Show Loading image with Autocomplete Extender Textbox

Show Loading image with Autocomplete Extender Textbox


try this Example to Show Loading image with Autocomplete Extender Textbox

Step1 :- Open VS2008 and create a new website

Step2 :- add new Linq to SQL DataContext  and name it “Northwind.dbml” and add Products table in it

Step3 :- Add new Web page and from ToolBox drag ScriptManager , TextBox and AJAX Autocomplete Extender control

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
        function ShowImage() {
            document.getElementById('txtAutoComplete').style.backgroundImage = 'url(loading.gif)';
            document.getElementById('txtAutoComplete').style.backgroundRepeat = 'no-repeat';
            document.getElementById('txtAutoComplete').style.backgroundPosition = 'right';
        function HideImage() {
            document.getElementById('txtAutoComplete').style.backgroundImage = 'none';
    <form id="form1" runat="server">

       <asp:ScriptManager ID="ScriptManager1" runat="server" >
              <asp:ServiceReference Path="~/WebService.asmx" />
            Enter Product Name:-
         <asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>
            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"


Step4 :- In code behind add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default4 : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

    public static string[] GetNames(string prefixText, int count)
        NorthwindDataContext db = new NorthwindDataContext();
        return db.Products.Where(n => n.ProductName.StartsWith(prefixText)).OrderBy(n => n.ProductName).Select(n => n.ProductName).Take(count).ToArray();

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net, Linq
  1. October 25, 2010 at 12:15 pm


    is a very useful line of code—every body plese use this while populating progress indicator with AutoComplete Extender….

  2. jakam
    October 26, 2010 at 12:49 pm

    Greate tutorial…

  3. yasserzaid
    October 29, 2010 at 11:39 am

    @jakam , @ASP.NET :- Thank you hope this helps you 🙂

  4. Jason
    May 26, 2011 at 9:46 pm

    Was quick and easy! Thanks!

  5. yasserzaid
    May 29, 2011 at 8:19 am

    @Jason :- you are welcome hope my post helps you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: