Auto Complete Control Like in GMail/Hotmail/Facebook

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    
    <script type="text/javascript" language="javascript">
    
    function OnItemSelected(source, eventArgs) {

        var hdnValueID = "<%= hdnValue.ClientID %>";
        document.getElementById(hdnValueID).value = eventArgs.get_value();
        __doPostBack(hdnValueID, "");
       
    }
    function ShowProcessImage() {

        var autocomplete = "<%= txtCustomer.ClientID %>";
        document.getElementById("<%= txtCustomer.ClientID %>").style.backgroundImage = 'url(loading.gif)';
        document.getElementById("<%= txtCustomer.ClientID %>").style.backgroundRepeat = 'no-repeat';
        document.getElementById("<%= txtCustomer.ClientID %>").style.backgroundPosition = 'right';
    }
    function HideProcessImage() {
        var autocomplete = "<%= txtCustomer.ClientID %>";
        document.getElementById("<%= txtCustomer.ClientID %>").style.backgroundImage = 'none';
    }
</script>
<style type="text/css">
 .items
{
    
    display: block;
    float: left;
    text-align: left;
    width: auto;
    margin:2px;
    box-shadow:0px 0px 1px #666666; 
    border-radius:3px; 
    border: thin solid #666666;
    
}
    .items:hover
{
        display: block;
        float: left;
        text-align: left;
        width: auto;
        margin: 2px;
        box-shadow: 0px 0px 5px #0066FF;
        border-radius: 3px;
        border: thin solid #0066FF;
    }
</style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            
            Enter Contact Name<table style="border: thin inset #000000; width: auto;" >
                <tr>
                    <td>
                    <div>
                    <asp:DataList ID="DataList1" runat="server" CellPadding="2" Font-Bold="False" 
                            Font-Italic="False" Font-Overline="False" Font-Size="Small" 
                            Font-Strikeout="False" Font-Underline="False" ForeColor="#333333" 
                            HorizontalAlign="Left" RepeatDirection="Horizontal" Width="400px">
                            <AlternatingItemStyle BackColor="White" />
                            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                            <ItemStyle BackColor="#EFF3FB" Font-Size="Small" CssClass="items" />
                            <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" 
                                HorizontalAlign="Justify" VerticalAlign="Top" Wrap="False" />
                            
                            <ItemTemplate>
                                <table border="0" cellpadding="0" cellspacing="0" 
                                     width="100%">
                                    <tr>
                                        <td valign="top" align="left" >
                                            <%# Eval("Name") %>&nbsp;
                                        </td>
                                        <td align="right" valign="middle">
                                            <asp:ImageButton ToolTip="Remove" ID="ImageButton1" runat="server" ImageUrl="~/delete.png" 
                                                onclick="ImageButton1_Click" />
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </asp:DataList>
                        
                        </div>
                        
                        <asp:TextBox Style="float:left" ID="txtCustomer" runat="server" BorderWidth="0px" Width="400px"></asp:TextBox>
                        <asp:AutoCompleteExtender ID="txtcUSTOMER_AutoCompleteExtender" runat="server" 
                            CompletionInterval="0" CompletionSetCount="0" DelimiterCharacters=";, :" 
                            EnableCaching="true" FirstRowSelected="True" MinimumPrefixLength="1" 
                            OnClientItemSelected="OnItemSelected" OnClientPopulated="HideProcessImage" 
                            OnClientPopulating="ShowProcessImage" ServiceMethod="GetCustomer" 
                            TargetControlID="txtCustomer" UseContextKey="True">
                        </asp:AutoCompleteExtender>
                        <asp:HiddenField ID="hdnValue" runat="server" 
                            onvaluechanged="hdnValue_ValueChanged" />
                       
                    </td>
                </tr>
            </table>
            
        </ContentTemplate>
    </asp:UpdatePanel>
                                        

    </asp:Content>