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

Keyboard Support

  • Demo Configurator

RadAutoCompleteBox has a built-in keyboard support. You can navigate to the control instance using the Tab key if you set the TabIndex property of RadAutoCompleteBox.

In addition, you can use a shortcut if you set the AccessKey property. In this particular example, the TabIndex was set to 1 (first tab stop) and AccessKey is the letter typed inside the TextBox, meaning that RadAutoCompleteBox will receive focus when users press Alt + The letter typed inside the TextBox(Alt + Shift + The letter typed inside the TextBox for FF).

Once the RadAutoCompleteBox control is focused, you can type certain letter to request the underlying datasource and navigate trough the EntriesCollection in the DropDown, using DownArrow or UpArrow.

  • PressAlt + The letter typed inside the TextBox" (Shift + Alt + The letter typed inside the TextBox" for Firefox) to move the focus in the RadAutoCompleteBox.
  • Use DownArrow/UpArrow to navigate through the EntriesCollection. Press Enter to select an Entry.
  • Use Esc to close the opened DropDown and the DownArrow to expand it again, querying for the entries regarding the typed in the input text.
  • Use LeftArrow/RigthArrow to navigate through the tokens that are already added in the RadAutoCompleteBox.
  • Once a token is focused you can press F2 to edit its Text (if AllowCustomEntry andAllowTokenEditing are enabled) or simply use Delete to remove it
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="AutoCompleteBox.Examples.Accessibility_and_Internationalization.KeyboardSupport.DefaultVB" %>

<%@ 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>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox1" runat="server" 
            DropDownHeight="300" Width="300px" AllowCustomEntry="true"
            TokensSettings-AllowTokenEditing="true" TabIndex="1" DataSourceID="SqlDataSource1"
            DataTextField="ContactName" EmptyMessage="Select Customers" DataValueField="CustomerID" />
    </div>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CustomerID], [ContactName] FROM [Customers] ORDER By ContactName"></asp:SqlDataSource>


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox1" />
                </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="Wide">

                    <ul class="fb-group">
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBoxAccessKey" runat="server" Width="160px" LabelWidth="80"
                                Mask="L" Text="A" AutoPostBack="true" SelectionOnFocus="SelectAll"
                                OnTextChanged="RadMaskedTextBoxAccessKey_TextChanged" Label="Access key" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance