Keyboard interaction

10 Feb 20162 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.

HTML

<ej:ListBox ID="ListBox" runat="server" EnableIncrementalSearch="true" CaseSensitiveSearch="true">
        <Items>
            <ej:ListBoxItems Text="Audi A4"></ej:ListBoxItems>
            <ej:ListBoxItems Text="Audi A5"></ej:ListBoxItems>
            <ej:ListBoxItems Text="Audi A6"></ej:ListBoxItems>
            <ej:ListBoxItems Text="Audi A7"></ej:ListBoxItems>
            <ej:ListBoxItems Text="Audi A8"></ej:ListBoxItems>
            <ej:ListBoxItems Text="BMW 501"></ej:ListBoxItems>
            <ej:ListBoxItems Text="BMW 502"></ej:ListBoxItems>
            <ej:ListBoxItems Text="BMW 503"></ej:ListBoxItems>
            <ej:ListBoxItems Text="Batch"></ej:ListBoxItems>
            <ej:ListBoxItems Text="BMW 507"></ej:ListBoxItems>
        </Items>
    </ej:ListBox>

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.