Navigate Unordered List with Keyboard

by helpinspireme

HTML

<input type="text" id="email" tabindex="1">

<ul class="user-list" tabindex="2">
    <li><a>Nathan Morgan - [email protected]</a></li>
    <li><a>Chris Brooks - [email protected]</a></li>
    <li><a>Kevin McGrey - [email protected]</a></li>
</ul>

SCSS

ul.user-list { background: #e6e7e8; padding: 1px; list-style: none; width: 98%; margin: 0 auto 20px auto; display: none;
    li { background: #fff; margin: 1px 0; display: block; padding: 10px; }
    li.selected { background: #2a76b0;  color: #fff; }
  }

JavaScript

var userInfo = $('.user-list li');
var userSelected;
$(window).keydown(function(e){
    if(e.which === 40){
        if(userSelected){
            userSelected.removeClass('selected');
            next = userSelected.next();
            if(next.length > 0){
                userSelected = next.addClass('selected');
            }else{
                userSelected = userInfo.eq(0).addClass('selected');
            }
        }else{
            userSelected = userInfo.eq(0).addClass('selected');
        }
    }else if(e.which === 38){
        if(userSelected){
            userSelected.removeClass('selected');
            next = userSelected.prev();
            if(next.length > 0){
                userSelected = next.addClass('selected');
            }else{
                userSelected = userInfo.last().addClass('selected');
            }
        }else{
            userSelected = userInfo.last().addClass('selected');
        }
    }
});


// Show/Hide Dropdown Options
$('#email').keyup(function(){
  var len = this.value.length;
  if (len >= 3) {
  $('ul.user-list').slideDown();
  } else {
  $('ul.user-list').slideUp();
  }
});

  // Auto fill Email with selection
   var userList = $(".user-list");
   userList.on("click", "li", function () {
       $("#email").val($(this).text());
   });