New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms AutoCompleteBox Overview

Text mode

Token mode

  • Demo Configurator
  • FilterContains
  • Delimiter;
  • DropDownPositionAutomatic
  • SelectionMode (Text mode only)Multiple
  • MaxResultCount10
  • MinFilterLength1

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'.

You can now control whether the input area will render all entries on a single line or it will wrap on multiple lines with the help of the SingleLineEntries property.

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.

Note: The Material skin is available only for the modern Lightweight render mode. Change the skin or the mode to properly visualize the demonstrated control.

RadAutoCompleteBox and 120+ 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

More about RadAutoCompleteBox for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AutoCompleteBox.Examples.Default.DefaultCS" %>

<!DOCTYPE html>
<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 RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1"  EmptyMessage="Please type here"
                DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Text" Width="350" DropDownWidth="150px">
            </telerik:RadAutoCompleteBox>
        </div>
        <div class="demo-container">
            <h2>Token mode</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2"  EmptyMessage="Please type here"
                DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350" DropDownWidth="150px">
            </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 CssClass="new" ID="CheckBoxSingleLineEntries" runat="server" Text="Allow Single Line Entries " AutoPostBack="true" /></span>
                        </li>
                        <li>
                            <span class="checkbox"><asp:CheckBox ID="CheckBoxAllowCustomEntry" runat="server" Text="Allow Custom Entry" 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>
    <style>
    .new:before {
        content: "";
        width: 32px;
        height: 10px;
        background-color: #2eb246;
        background-position: -10px 0;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAbCAYAAAAULC3gAAAA50lEQVRYR+1W2w6FMAiT///omZlgGiyMk4PEGH1xN2dXSplsD3vkYXi2ckBjjCEix77anm89+JzDNbhutm8BdGwMP44AtABSMAiMMYQMKqu3MMRCpmM2lDaEbYCQIQbqnH99lv17wPKQvRdQxtBUjFagOI4ZZlM96l9E7QGKUpj5CNvHmp/t4zenhjoAeeXjJ0Cef3i1St05YiHFkKcDdFhPQ5kwsQLLtPil/cqnPoZaGLKCZeKP1mDilIRs5WHKSiYbywAxv8p4mPWkMkCrWyIzQ9RT6RU2o6HInWnpWKm/a74kZJVgd6+zmCtV5tVUAAAAAElFTkSuQmCC");
        background-repeat: no-repeat;
        position: absolute;
        left: -5px;
    }
    </style>

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

Support & Learning Resources

Find Assistance