RadAutoCompleteBox - Telerik ASP.NET AutoCompleteBox

Text mode

Token mode

Demo Configurator

  • FilterContains
  • Delimiter;
  • DropDownPositionAutomatic
  • SelectionMode (Text mode only)Multiple
  • MaxResultCount10
  • MinFilterLength1
Isolate this demo as a stand-alone application

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.

Key Features

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

Read details on the AutoComplete product page

<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AutoCompleteBox.Examples.Default.DefaultCS" %>

<!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>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-containers">
        <div class="demo-container">
            <h2>Text mode</h2>
            <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" EmptyMessage="Please type here"
                DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Text" Width="350">
            </telerik:RadAutoCompleteBox>
        </div>
        <div class="demo-container">
            <h2>Token mode</h2>
            <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2" EmptyMessage="Please type here"
                DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350">
            </telerik:RadAutoCompleteBox>
        </div>
    </div>

    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [FirstName], [LastName], [EmployeeID] FROM [Employees]"></asp:SqlDataSource>



    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox1" />
                    <telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="Server" ID="FilterComboBox" AutoPostBack="true" Label="Filter">
                                <Items>
                                    <telerik:DropDownListItem Text="Contains" Value="Contains" />
                                    <telerik:DropDownListItem Text="StartsWith" Value="StartsWith" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="Server" ID="DelimiterComboBox" AutoPostBack="true" Label="Delimiter">
                                <Items>
                                    <telerik:DropDownListItem Text=";" Value=";" Selected="true" />
                                    <telerik:DropDownListItem Text="," Value="," />
                                    <telerik:DropDownListItem Text="|" Value="|" />
                                    <telerik:DropDownListItem Text=";," Value=";," />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="Server" ID="DropDownPositionComboBox" AutoPostBack="true" Label="DropDownPosition">
                                <Items>
                                    <telerik:DropDownListItem Text="Automatic" Value="Automatic" Selected="true" />
                                    <telerik:DropDownListItem Text="Static" Value="Static" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <span class="checkbox"><asp:CheckBox ID="CheckBoxAllowCustomEntry" runat="server" Text="AllowCustomEntry" AutoPostBack="true" /></span>
                        </li>
                        <li>
                            <span class="checkbox"><asp:CheckBox ID="CheckBoxAllowTokenEditing" runat="server" Text="Allow Token Editing" AutoPostBack="true" /></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="Server" ID="SelectionComboBox" AutoPostBack="true" Label="SelectionMode (Text mode only)">
                                <Items>
                                    <telerik:DropDownListItem Text="Multiple" Value="Multiple" Selected="true" />
                                    <telerik:DropDownListItem Text="Single" Value="Single" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="Server" ID="cbMaxResultsCount" AutoPostBack="true" Label="MaxResultCount">
                                <Items>
                                    <telerik:DropDownListItem Text="10" Value="10" />
                                    <telerik:DropDownListItem Text="20" Value="20" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="Server" ID="cbMinFilterLength" AutoPostBack="true" Label="MinFilterLength">
                                <Items>
                                    <telerik:DropDownListItem Text="1" Value="1" />
                                    <telerik:DropDownListItem Text="2" Value="2" />
                                    <telerik:DropDownListItem Text="4" Value="4" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Find Assistance

Help Us Improve

Was this example helpful?