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 |
---|---|
+ 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.
-
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"))
-
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
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page