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

Autocomplete and Filtering

Autocomplete

Filtering

  • Demo Configurator
AutoComplete
  • Autocomplete separator:None
Filtering
Filter:Contains

RadComboBox supports automatic completion of the text typed in the input area and filtering functionalities.

  • The first RadComboBox demonstrates how text is completed to the match, which is found among the items from the Items collection of the control, whenever the defined separator or the 'Enter' key is pressed.
    This behavior of RadComboBox is enabled/disabled by the MarkFirstMatch property which takes boolean for a value.
    When separator, different than the default one, is needed such can be defined by the AutoCompleteSeparator property which takes character for a value.
  • The second RadComboBox shows the client-side filtering functionality; end users can perform fast search among all items without a callback to the server.
    The Filter property has three values:
    • None - this is the default value. No filtering is done.
    • Contains - will return all items which text contains the search text anywhere.
    • StartsWith - will return all items which text starts with the search text.

    To enable the filtering functionality of RadComboBox the Filter property need to be set to either Contains or StartsWith.

If your scenario does not require the rich functionality of RadComboBox and you need a simple drop down list with autocomplete, we suggest that you try our controls designed specifically for this purpose: RadAutoCompleteBox and the RadSearchBox .

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.AutoCompleteClientSide.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</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="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

        <div class="demo-container size-narrow">
            <h2>Autocomplete</h2>
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="400" Height="400px" 
                EmptyMessage="Type an E-mail" DataSourceID="SqlDataSource1" DataTextField="ContactName"
                OnItemDataBound="RadComboBox1_ItemDataBound">
            </telerik:RadComboBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="Button1" Text="Submit" OnClick="Button1_Click" CssClass="submit"  />
            <asp:Literal ID="SelectedEmails" runat="server" Visible="false" />
        </div>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [ContactName] FROM [Customers] ORDER BY [ContactName]"></asp:SqlDataSource>

        <div class="demo-container size-narrow">
            <h2>Filtering</h2>
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" AllowCustomText="true" runat="server" Width="500" Height="400px"
                DataSourceID="SqlDataSource1" DataTextField="ContactName" EmptyMessage="Search for people...">
            </telerik:RadComboBox>
        </div>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [ContactName] FROM [Customers] Order By ContactName" />
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <fieldset>
                        <legend>AutoComplete</legend>
                        <ul class="fb-group">

                            <li>
                                <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>
                                <qsf:DropDownList ID="RadDDLAutocompleteSeparator" runat="server" Size="Narrow" AutoPostBack="true" Label="Autocomplete separator:">
                                    <Items>
                                        <telerik:DropDownListItem Text="None" Value="" Selected="true"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text=";," Value=";,"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text=";" Value=";"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="," Value=","></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="|" Value="|"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                        </ul>
                    </fieldset>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Filtering">
                    <qsf:DropDownList ID="RadDDLFilter" runat="server" AutoPostBack="true" Label="Filter:" Size="Medium">
                        <Items>
                            <telerik:DropDownListItem Text="None" Value="0" />
                            <telerik:DropDownListItem Text="Contains" Value="1" Selected="true" />
                            <telerik:DropDownListItem Text="StartsWith" Value="2" />
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>



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

Support & Learning Resources

Find Assistance