Keyboard Interaction

12 Jun 20231 minute to read

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

Keyboard shortcut keys

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

The following steps explain how you can enable keyboard interaction for an AutoComplete textbox.

  1. In the View page, define the AutoComplete control.
  • CSHTML
    • <ej-autocomplete id="autocomplete" datasource="ViewBag.datasource">
                <e-autocomplete-fields text="Text" key="UniqueKey" />
 </ej-autocomplete>

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

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

      AutoComplete focused with keyboard shortcut