Blazor AutoComplete Example - Keyboard Navigation

AutoComplete / Keyboard Navigation

This example demonstrates the keyboard functionalities of Blazor AutoComplete component. Use keyboard shortcuts to interact with AutoComplete.

Loading Syncfusion Blazor Server Demos…

The AutoComplete supports the following keyboard shortcuts to initiate various actions.

Focus
  • Alt + J - Focuses on the first component of the sample.
Input Navigation
  • Alt + Down arrow - Opens the suggestion list.
  • Alt + Up arrow - Closes the suggestion list.
  • Home - Cursor moves before the first character in the input.
  • End - Cursor moves next to the last character in the input.
  • Tab - Focuses on the next Tab Index element on the page.
  • Shift + Tab - Focuses on the previous Tab Index element on the page.
Selection
  • Enter - Selects the focused item.
Popup Navigation
  • Down arrow - In popup hidden state, opens the suggestion list. In popup open state, selects the first item when no item is selected else selects the item next to the currently selected item.
  • Up arrow - In popup hidden state, opens the suggestion list. In popup open state, selects the last item when no item is selected else selects the item previous to the currently selected one.
  • Page down - Scrolls down to the next page and selects the first item when the popup list opens.
  • Page up - Scrolls up to the previous page and select the first item when the popup list opens.
  • Esc - Closes the popup list when it is in an open state.
Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE