Keyboard Interaction

13 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.

        @*Refer to the DataSource defined in Local Data binding Step 1 *@
   
        @{IDictionary<string, object> htmlAttribute = new Dictionary<string, object>();
   
        htmlAttribute.Add("accesskey", "j");
   
        }
   
   
        @(Html.EJ().Autocomplete("autocomplete").HtmlAttributes(htmlAttribute)
   
            .Datasource((IEnumerable<CarsList>
   
            )ViewBag.datasource)
   
            .AutocompleteFields(field => field.Key("UniqueKey").Text("Text").GroupBy("Category"))
   
            .Width("200px"))

2. Run the sample, press Access Key + 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