Keyboard Interaction in EJ 1 ASP.NET MVC AutoComplete

23 May 2017 / 1 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