Keyboard interaction

You can use Keyboard shortcut keys as an alternative for mouse actions to interact with the ListBox widget. Please refer the below table for details about short cut keys and its corresponding usage.

Shortcut Key Usage
Enter Selects the focused item
Up Moves to previous item
Down Moves to next item
Left Moves to previous item
Right Moves to next item
Home Moves to first item
End Moves to last item

NOTE

Initial focus can be done by pressing tab key multiple times until it is focused.

The Incremental search helps in finding the specific item in the ListBox,as the user types the text one or more possible matches for the text are found and the first matched item will be selected.It can be enabled in the ListBox widget using “enableIncrementalSearch” API. The search can be case sensitive or case insensitive.

  • html
  • <ul id="listbox">
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
            <li>BMW 501</li>
            <li>BMW 502</li>
            <li>BMW 503</li>
            <li>Batch</li>
            <li>BMW 507</li>
            <li>BMW 3200</li>
            <li>Cut</li>
            <li>Copy</li>
            <li>Paste</li>
            <li>Add</li>
            <li>Delete</li>
            <li>D5ishCover</li>
            <li>Di5shCover</li>
            <li>Dis5hCover</li>
            <li>Dish5Cover</li>
            <li>DishC5over</li>
            <li>DishCo5ver</li>
            <li>DishCov5er</li>
            <li>DishCove5r</li>
            <li>Comments</li>
            <li>Links</li>
            <li>Clear Formatting</li>
        </ul>
    
        <script type="text/javascript">
     /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />\
    module ListBoxComponent {
            $(function () {
               var listboxInstance = new ej.ListBox($("#listbox"), {
                    enableIncrementalSearch: true,
                    caseSensitiveSearch: true
                });
            });
    }
        </script>

    Press tab key to get ListBox focus and press “A” (enable caps lock or press shift + “A” since case sensitive search is enabled) to get the below output.