jqwidgets-framework/demos/Angular/src/dropdownlist/keyboardnavigation/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxDropDownList style="float: left"
    [width]="200" [height]="30" [source]="source" [selectedIndex]="4">
</jqxDropDownList>

<div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left">
    <ul>
        <li><b>Tab</b> - Like other widgets, the jqxDropDownList widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the selection. A second tab will take the user out of the widget.</li>
        <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
        <li><b>Up/Down</b> arrow keys - select previous or next item.</li>
        <li><b>Page Up/Page Down</b> keys - navigate up or down with one page.</li>
        <li><b>Home/End</b> keys - navigate to the first or last item.</li>
        <li><b>Alt Up/Down</b> arrow keys - opens or closes the popup.</li>
        <li><b>Esc</b> - closes the popup.</li>
        <li><b>Enter</b> - selects an item when the popup is opened. Opens the popup when closed.</li>
        <li><b>Incremental Search</b> - start typing to select the matching item.</li>
        <li><b>First letter</b> - press a key to navigate to a matching item. Subsequent press on the same key will iterate over the matches.</li>
    </ul>
</div>