Dropdown options - select with keyboard shortcuts

Question

I have a web app with columns of data. At the head of each column is a drop down list. The user selects from the options in the drop down to categorize the type of data in the rest of the column. The same drop down option is selected for about 60% of the columns. There are a large number of options in the drop down list (50+) and a requirement to keep the current group order (the option that is used frequently is about 2/3 down the list). This means that the user has to scroll down the list in order to select the same option. This leads to user frustration as well as the potential for incorrect input as user attention tends to wonder over time.

I'm open to other solutions as well, but I think assigning keyboard shortcuts to a few of the options might make for a better experience and end product. I would envision the user behavior to be something like this:

click on the column drop down.
press "3" to move down to the third group of options
use mouse to make final selection from the group

Currently users can press the key of the first letter of an option and the drop down will move to the next option, however several of the early options in the list have the same first few letters as the option that is chosen 60% of the time (which is well down the list of options), so it's not much help.

Example Code:

<select id="field_run_0_col_3_map_0" data-run="0" data-column="3" data-map="0" class="form-control fieldType" style="min-width:120px;">
                <option value="">Ignore</option>

                <optgroup label="Group 1">

                    <option value="option_1">Option 1</option>
                    <option value="option_2">Option 2</option>
                    <option value="option_3">Option 3</option>
                    
                </optgroup>
                
                <optgroup label="Group 2">

                    <option value="option_4">Option 4</option>
                    <option value="option_5">Option 5</option>
                    <option value="option_6">Option 6</option>
                    <option value="option_7">Option 7</option>


                </optgroup>

                <optgroup label="Group 3">
                    <option value="option_8">Option 8</option>
                    <option value="option_9">Option 9</option>
                    <option value="option_10">Option 10</option>
     
                </optgroup>


            </select>

I reviewed several other posts regarding binding keyboard input to drop down options, but none of them seem to fit what I am looking for, and most are pretty outdated.

Sending both the value and key of an option box as parameters?

Enter key press event in JavaScript

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

Sending both the value and key of an option box as parameters?

JavaScript keyboard shortcuts for web application

Dropdown options - select with keyboard shortcuts

0 Answers0