How to trigger tab key button event?

Question

If you see the image attached below. The country name style changes on mouse over. But when i click the down arrow key we have to show the same behavior. Can some one tell me how to do this ?

Answer 1

Idea is to bind on keydown event and if key is arrow down - you should select next in the list. You have to have index of current selection and using it highlight menu item. When mouse over event happens, just change current selection index to the hovered item. Using index change background color. It's super easy to do with ReactJs and similar UI frameworks and a little messy with jQuery but if you got the idea, hopefully, you will succeed.

2 code snippets that should help:

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

$('.tg').bind('keypress', function(event) {
  if(event.which === 13) { // tab
    $(this).next().focus();
  }
});

Sources: - Simulate pressing tab key with jQuery - Binding arrow keys in JS/jQuery

I have demo repo where i done similar thing with ReactJs https://github.com/liesislukas/react-dropdown-autocomplete-with-search