使用 AngularJS 在 <li> 列表中实现键盘导航

Question

我已经使用 $http 服务来生成自动完成以获取相关输入的所有数据，并且如果我使用鼠标使用它，它的工作正常。但是，其中没有键盘导航。我只想在 Enter 上的选项列表和选择上启用向上和向下箭头移动。

<div class="compare-col-head head-pos">
       <h1 class="museo_sans900" ng-hide="hideSearch">Add player</h1>
       <form name="addPlayer1" class="search-form padd-none" ng-hide="hideSearch">
            <div class="form-group museo_sans300">
                  <input type="search" ng-model="search1" class="form-control" placeholder="Search" ng-change="search(1,search1)">
                  <a href="javascript:void(0)"><i class="fa fa-search search-pos search-icon"></i></a></div>
                <ul ng-show="ulShow" class="col-td museo_sans300 playerListUL">
                  <li class="searchPlayerList" ng-repeat="plyer in playerList" ng-click="selectPlayer(plyer,1)"> {{plyer.PlayerName}} </li>
                </ul>
              </form>
              <div class="team-kit" ng-show="hideSearch"><img ng-src="{{playerDetails.KitURL}}" alt=""/></div>
              <div class="team-data" ng-show="hideSearch">
                <h1>{{playerDetails.PlayerName}}</h1>
                <h2>{{playerDetails.TeamName}}</h2>
                <h3>{{playerDetails.fullRole}}</h3>
                <h4>Season points: <span>{{playerDetails.Points == undefined? 0: playerDetails.Points}}</span></h4>
                <h4>Player Cost: <span>$100</span></h4>
              </div>
 </div>

我已经尝试了很多搜索，但找不到适合我的方案的解决方案。

Answer 1

我为你做了一个小技巧，要测试它，你需要点击第一个元素（因为它嵌入在这个网站中）

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 38:
            document.activeElement.previousElementSibling.focus();
            break;
        case 40:
            document.activeElement.nextElementSibling.focus();
            break;
    }
};

li:focus{
    border: 1px solid red;
}

<ul>
    <li tabIndex="0">item 1</li>
    <li tabIndex="0">item 2</li>
    <li tabIndex="0">item 3</li>
    <li tabIndex="0">item 4</li>
    <li tabIndex="0">item 5</li>
    <li tabIndex="0">item 6</li>
    <li tabIndex="0">item 7</li>
    <li tabIndex="0">item 8</li>
</ul>