Home / AJAX

Page History: Creating a Simple Auto-Complete TextBox

Compare Page Revisions



« Older Revision - Back to Page History - Newer Revision »


Page Revision: 2010/05/22 18:44


In this tutorial, you learn how to apply an AutoCompleteExtender control to a TextBox in order to display auto-complete suggestions as you type.

We'll create an auto-complete TextBox by following these steps (1) Add a ToolkitScriptManager (2) Add a TextBox control (3) Add an AutoCompleteExtender (4) Add a page method

To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.

Add a ToolkitScriptManager

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>


Add a TextBox Control



<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:Panel ID="Message" runat="server"> Pay attention to me! </asp:Panel>


Add a LinkButton

We'll use a LinkButton control to initiate the animation. Notice that the LinkButton includes an OnClientClick property that prevents the LinkButton from causing a postback:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:Panel ID="Message" runat="server"> Pay attention to me! </asp:Panel>

<asp:LinkButton ID="lnkYellowFade" OnClientClick="return false;" runat="server">Play Animation</asp:LinkButton>


Add an Animation Control

The final step is to add the Animation control. When you click the LinkButton, the Animation control uses a Color animation to create the yellow fade effect.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="Animation_Simple" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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">
    <title>Yellow Fade</title>
    <style type="text/css">
    
    #Message {
        width: 250px;
        padding: 10px;   
        margin-bottom:10px;
    }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>

<asp:Panel ID="Message" runat="server"> Pay attention to me! </asp:Panel>

<asp:LinkButton ID="lnkYellowFade" OnClientClick="return false;" runat="server">Play Animation</asp:LinkButton>

<asp:AnimationExtender ID="AnimationExtender1" TargetControlID="lnkYellowFade" runat="server"> <Animations> <OnClick> <Sequence> <Color AnimationTarget="Message" Duration="2" Property="style" PropertyKey="backgroundColor" StartValue="#FFFF66" EndValue="#FFFFFF" /> </Sequence> </OnClick> </Animations> </asp:AnimationExtender>

</div> </form> </body> </html>





The final result looks like this: