RTL Support

This feature allows you to change the alignment of the AutoComplete textbox control from left-to-right to right-to-left (RTL). The custom template AutoComplete textbox also supports RTL. 

Enabling RTL Support

In the design page, define the AutoComplete control and configure the EnableRTL property

  • html
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
    <ej:Autocomplete ID="AutoComplete" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Width="300px" EnableRTL="true" />

    The following screenshot is the output for AutoComplete when EnableRTL is set to true.

    Keyboard interaction

    You can use keyboard shortcut keys as an alternative to the mouse while using the AutoComplete control. The AutoComplete control allows you to perform all kinds of actions using keyboard shortcuts.

    Shortcut Key Description

    Access key

    + j
    Focuses into the autocomplete text box
    Up Moves to previous item in pop up
    Down Moves to next item in pop up
    Enter Selects the focused item
    Esc Closes the popup

    Configure keyboard interaction

    In the design page, define the AutoComplete control with corresponding data fields.

  • html
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
       <ej:Autocomplete ID="AutoComplete" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Width="300px" />

    Define the JavaScript to focus the AutoComplete Textbox on Alt + J key press.

  • js
  • <script type="text/javascript">
    
               $(function () {
    
                   $(document).on("keydown", function (e) {
    
                       if (e.altKey && e.keyCode === 74) { // j- key code.
    
                           $("#<%=AutoComplete.ClientID%>").focus();
    
                       }
    
                   });
    
              });

    Run the sample, press AccessKey + J to focus in the AutoComplete control, and you can navigate by using the arrow keys. Use the Escape key to close the popup.

    Server Side Events

    The server side events present in the AutoComplete control are listed as follows.

    Event Name Description Arguments
    OnValueSelect Triggered when the focus is moved from the text box. e.Key- Defines the key for the items to differentiate two items with same. e.Text- Defines the tag value or display text. e.Value- Defines the default value to be displayed in the autocomplete textbox. e.EventType – Event Name e.Arguments – Contain keys and value of AutoComplete
    OnFocusOut Triggered when the value is selected e.Key- Defines the key for the items to differentiate two items with same. e.EventType – Event Name e.Arguments – Contain keys and value of AutoComplete e.Value- Defines the default value to be displayed in the autocomplete textbox.

    The following steps explain you how to define server side event for a Toolbar control. In an ASPX page, add the AutoComplete control as illustrated in the following code example.

  • html
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
       <ej:Autocomplete ID="AutoComplete" runat="server" OnFocusOut="AutoComplete_FocusOut" OnValueSelect="AutoComplete_ValueSelect" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Width="300px" />

    In the code behind, define the actions to be performed.

  • c#
  • protected void AutoComplete_FocusOut(object sender,EventArgs e)
    
            {
    
                Response.Write("Server side event has been triggered");
    
            }
    
    
    
            protected void AutoComplete_ValueSelect(object sender,EventArgs e)
    
            {
    
                Response.Write("Server side event has been triggered");
    
            }