Javascript 在<;中实现键盘导航;李>;使用AngularJS的列表

Javascript 在<;中实现键盘导航;李>;使用AngularJS的列表,javascript,jquery,css,angularjs,Javascript,Jquery,Css,Angularjs,我使用$http服务生成自动完成,以获取相关输入的所有数据,如果我使用鼠标,它的工作正常。但是,其中没有键盘导航。我只想在输入时启用选项和选择列表上的上下箭头移动 <div class="compare-col-head head-pos"> <h1 class="museo_sans900" ng-hide="hideSearch">Add player</h1> <form name="addPlayer1" class=

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

<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>

添加玩家
  • {{plyer.PlayerName}
{{playerDetails.PlayerName} {{playerDetails.TeamName} {{playerDetails.fullRole} 赛季积分:{{playerDetails.points==未定义?0:playerDetails.points} 玩家费用:100美元

我已经尝试了很多搜索,但没有找到适合我的场景的解决方案。

我为您做了一个小提琴,要测试它,您需要单击第一个元素(因为它嵌入在这个站点中)

document.onkeydown=函数(evt){
evt=evt | | window.event;
开关(evt.keyCode){
案例38:
document.activeElement.previousElementSibling.focus();
打破
案例40:
document.activeElement.nextElementSibling.focus();
打破
}
};
li:focus{
边框:1px纯红;
}
    第1项 第2项 第3项 第4项 第5项 第6项 第7项 第8项
您应该在
li
中添加
tabIndex=0
,只要tabIndex就可以解决问题,或者我需要添加其他内容吗?它将允许您使用
tab
shift+tab
来回导航,如果您想使用箭头键,您可以在每个
li
上添加事件侦听器,然后转到下一个/上一个这对我不起作用
nextElementSibling
&
previousElementSibling
在Chrome中有
null
值。