I’ve got a web form with a search box and two dropdowns, that provides search suggestions (when any are available).
The user should start their interaction in the searchbox, then set the correct dropdowns if the default choices are not desired. When they begin typing, a previously-hidden div element fills with search suggestions (pretty common/generic search-suggestions implementation).
The issue is that to get to the suggestions without using the mouse, the user has to press tab 4 times (to jump from the searchbox to the first dropdown, to the next dropdown, to the submit button, and finally, to the first suggestion). I’d like it to change so that the first press of tab, jumps to the first suggestion, and only go to the next input field after no more search-suggestions exist (in my implementation, this means a complete query has been entered).
I’d also like to allow use of the arrow-keys to jump to the suggestions and move between them.
Is there a good way to do this with JavaScript?
I guess moving the suggestions in HTML could get the tab button to work properly, but that would make the CSS trickier and wouldn’t make the arrow keys work.
So in summary, is there a way to change focus to a specific DOM node when a specific key is pressed? My google searches so far are having trouble answering that exact question.
