Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

ComboBox / Autocomplete

Example Configuration
  • select
select
 

  • RadComboBox supports client-side Autocomplete - end users can autocomplete RadComboBox Items. As soon as the user types some text in the input field, the text will be autocompleted to the first matching item.

    To enable this behavior you must set the MarkFirstMatch property to true.

    Additionally, you could set the AllowCustomText to true to allow free text, such that no Item matches upon it, to be entered in the RadComboBox.

    Finally, you could set the AutoCompleteSeparator property to a specified character, which will allow users to select more than one Item by separating them with this character.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.ComboboxExamplesCS.AutoCompleteClientSide.DefaultCS"
        Language="c#" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1" />
        
        <!-- custom head section -->
        <style type="text/css">
            span.text
            {
                font: 13px 'Segoe UI' , Arial, sans-serif;
                color: #4888a2;
                padding: 6px 18px 0 0;
                display: block;
            }
            
            #ConfigurationPanel1 ul
         {
             list-style: none;
             padding: 10px 0 20px 0;
             margin: 0;
         }
            
         #ConfigurationPanel1 ul li
         {
         line-height: 24px;
         float: left;
         padding-left: 11px;
         margin-left: 10px;
         width: 200px;
         }
            
         #ConfigurationPanel1 .checkBox input,
         .button
         {
                vertical-align: middle;
                margin: 0 3px;
         }
         html.rfdButton a.rfdSkinnedButton
         {
         vertical-align: middle;
         margin: 0 0 0 5px;
         }
         * html.rfdButton input.rfdDecorated
         {
             vertical-align: top;
         }
        </style>
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#" />
            
            <!-- content start -->
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" ControlsToSkip="Scrollbars"></telerik:RadFormDecorator>
                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="True">
                    <ul>
                        <li style="border-left: none;margin-left:0;padding-left:0">
    <asp:CheckBox
    runat="server" ID="CheckBoxMarkFirstMatch"
    AutoPostBack="true" Checked="true"
    Text="Mark first match" CssClass="checkBox" />
                        </li>
                        <li>
    <asp:CheckBox
    runat="server" ID="CheckBoxAllowCustomText"
    AutoPostBack="true" Checked="true"
    Text="Allow custom text" CssClass="checkBox"/>
                        </li>
                        <li>
    <asp:Label
    ID="LabelAutocompleteSeparator" runat="server"
    AssociatedControlID="RadComboBoxAutocompleteSeparator"
    Text="Autocomplete separator:" />
                                
                            <telerik:RadComboBox
                                runat="server" ID="RadComboBoxAutocompleteSeparator"
                                AutoPostBack="true"
                                Width="60px"
                                >
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" Value=""></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text=";" Value=";" Selected="true"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="," Value=","></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="|" Value="|"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text=";," Value=";,"></telerik:RadComboBoxItem>
                                </Items>
                            </telerik:RadComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorPanel>
                <div style="text-align: center; padding-top: 20px;">
                 <telerik:RadComboBox
                     ID="RadComboBox1" runat="server"
                     Width="590px" Height="140px"
                     EmptyMessage="Type an E-mail"
                     DataSourceID="SqlDataSource1" DataTextField="ContactName"
                     OnItemDataBound="RadComboBox1_ItemDataBound">
                 </telerik:RadComboBox>
                    
    <asp:SqlDataSource
    ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                     SelectCommand="SELECT [ContactName] FROM [Customers] ORDER BY [ContactName]" />
                        
                 <asp:Button runat="server" ID="Button1" Text="Submit" OnClick="Button1_Click" />
                    
                 <asp:Label ID="Label1" runat="server" Visible="false" CssClass="text" />
                </div>
            </telerik:RadAjaxPanel>
            <div style="height:140px;">&nbsp;</div>
            <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451