AutoCompleteBox

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadAutoCompleteBox - Telerik's ASP.NET AutoCompleteBox

Demo hint

Type 'R' to view entries which contain/start with 'R'

Text mode
Token mode
Example Configuration
  • select
  • select
  • select
  • select
  • select
  •  
    select

tlrk.it/1ehrwjN To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1ehrwjN

About RadAutoCompleteBox for ASP.NET AJAX

Telerik RadAutoCompleteBox for ASP.NET AJAX is a powerful drop-down list control which allows users to select multiple entries and display them as a sequence of strings separated by a delimiter, or fancy styled tokens depending on your preferences.

The users are given the ability to either choose entries from the drop-down container, or create custom ones. The custom entries are created by pressing the defined delimiter, or the 'Enter' key in case of 'Token' input type.

The entries currently present in the input area are deleted by the 'Backspace' key or by the 'X' button, placed in the upper right corner of the entry. The entries are deleted by the 'X' button only when the InputType property of RadAutoCompleteBox is set to 'Token'.

RadAutoCompleteBox allows the user to edit a Token by double-clicking it when the AllowTokenEditing property is set to "true":
<telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1"
 DataSourceID="SqlDataSource1"  DataTextField="FirstName" InputType="Token" >
  <TokensSettings AllowTokenEditing="true" />
</telerik:RadAutoCompleteBox >

RadAutoCompleteBox can be bound to various data sources. It is populated with data by either server-side binding (ASP.NET Data Source controls), or client-side binding (Web service, WCF service, ODATA). The items loaded into the drop-down container of RadAutoCompleteBox are loaded using the load-on-demand approach -- the items are loaded when needed.

RadAutoCompleteBox and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular AutoCompleteBox demo, you can use the following path to find it in the sample website application:
autocompletebox/examples/default

Key Features

  • InputType
  • Client-side binding
  • Server-side binding
  • Rich appearance styles
  • Server templates
  • Client templates

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AutoCompleteBox.Examples.Default.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Src="~/AutoCompleteBox/Examples/Default/Info.ascx" TagPrefix="qsf" TagName="Info" %>
<!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>AJAX AutoComplete Tutorial | RadAutoCompleteBox for ASP.NET</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <qsf:InformationBox ID="InformationBox1" runat="server" Title="Demo hint">
        <p>
            Type 'R' to view entries which contain/start with 'R'
        </p>
    </qsf:InformationBox>
    <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server">
        <div class="qsf-demo-canvas qsf-demo-canvas-vertical">
            <fieldset>
                <legend>Text mode</legend>
                <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" EmptyMessage="Please type here"
                    DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Text" Width="350">
                </telerik:RadAutoCompleteBox>
            </fieldset>
            <fieldset>
                <legend>Token mode</legend>
                <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2" EmptyMessage="Please type here"
                    DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350">
                </telerik:RadAutoCompleteBox>
            </fieldset>
        </div>
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="true" Orientation="Vertical">
            <ul>
                <li>
                    <label>
                        Filter:</label>
                    <telerik:RadComboBox runat="Server" ID="FilterComboBox" AutoPostBack="true" Width="100"
                        Skin="Metro">
                        <Items>
                            <telerik:RadComboBoxItem Text="Contains" Value="Contains" />
                            <telerik:RadComboBoxItem Text="StartsWith" Value="StartsWith" />
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <label>
                        Delimiter:</label>
                    <telerik:RadComboBox runat="Server" ID="DelimiterComboBox" AutoPostBack="true" Width="50"
                        Skin="Metro">
                        <Items>
                            <telerik:RadComboBoxItem Text=";" Value=";" Selected="true" />
                            <telerik:RadComboBoxItem Text="," Value="," />
                            <telerik:RadComboBoxItem Text="|" Value="|" />
                            <telerik:RadComboBoxItem Text=";," Value=";," />
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <label>
                        DropDownPosition:</label>
                    <telerik:RadComboBox runat="Server" ID="DropDownPositionComboBox" AutoPostBack="true"
                        Skin="Metro" Width="100">
                        <Items>
                            <telerik:RadComboBoxItem Text="Automatic" Value="Automatic" Selected="true" />
                            <telerik:RadComboBoxItem Text="Static" Value="Static" />
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <label>
                        AllowCustomEntry:</label>
                    <asp:CheckBox runat="server" ID="CheckBoxAllowCustomEntry" AutoPostBack="true" />
                </li>
                <li>
                    <label>
                        AllowTokenEditing in Token Mode:</label>
                    <asp:CheckBox runat="server" ID="CheckBoxAllowTokenEditing" AutoPostBack="true" />
                </li>
                <li>
                    <label>
                        SelectionMode (Text mode only):</label>
                    <telerik:RadComboBox runat="Server" ID="SelectionComboBox" AutoPostBack="true" Width="80"
                        Skin="Metro">
                        <Items>
                            <telerik:RadComboBoxItem Text="Multiple" Value="Multiple" Selected="true" />
                            <telerik:RadComboBoxItem Text="Single" Value="Single" />
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <label>
                        MaxResultCount</label>
                    <telerik:RadComboBox runat="Server" ID="cbMaxResultsCount" AutoPostBack="true" Width="80">
                        <Items>
                            <telerik:RadComboBoxItem Text="10" Value="10" />
                            <telerik:RadComboBoxItem Text="20" Value="20" />
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <label>
                        MinFilterLength:</label>&nbsp;
                    <telerik:RadComboBox runat="Server" ID="cbMinFilterLength" AutoPostBack="true" Width="80">
                        <Items>
                            <telerik:RadComboBoxItem Text="1" Value="1" />
                            <telerik:RadComboBoxItem Text="2" Value="2" />
                            <telerik:RadComboBoxItem Text="4" Value="4" />
                        </Items>
                    </telerik:RadComboBox>
                </li>
            </ul>
        </qsf:ConfiguratorPanel>
    </telerik:RadAjaxPanel>
    <hr class="qsf-clear-float" />
    <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/AsyncUpload.png"
                AlternateText="tlrk.it/1ehrwjN" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1ehrwjN">tlrk.it/1ehrwjN</a>
    </div>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [FirstName], [LastName], [EmployeeID] FROM [Employees]"></asp:SqlDataSource>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here