Contact Support
Keyboard interaction
14 Dec 20173 minutes to read
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.
Incremental Search
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.
<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">
jQuery(function ($) {
$("#listbox").ejListBox({
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.