javascript Custom Select With Keyboard Inputs

[Dream500]

Hello Everyone,

I found the following tutorial which is what I was looking for.

https://www.w3schools.com/howto/howto_custom_select.asp

However it does not work with keyboard inputs. I am trying to update the javascript of this tutorial so it works like a native select. What I'm trying to do is:

1. If custom select is focused, pressing spacebar or enter drops down the options list
2. Pressing the up or down arrow keys, navigates/highlights previous or next option
3. Pressing enter on highlighted option, updates and closes native and custom select
4. Pressing escape, closes native and custom select

I've managed to get point number 4 (Pressing Esc closes all select boxes) by updating the last part of the javascript as follows.

/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
document.onkeydown = function(e) {
    e = e || window.event;
    if ((e.keyCode == 27) || (e.which == 27)) {
        closeAllSelect();
    }
};

However I cannot get points 1, 2 and 3 to work. Any help figuring it out or better yet suggest a script update, would be greatly appreciated.

Thanks in advance.

[Dream500]

Anyone? Or perhaps someone knows how to contact the author of the tutorial?