滚动下拉菜单时，如何将鼠标悬停与键盘焦点同步 Angular 2
When scrolling through a dropdown, how to sync mouse hover with keyboard focus Angular 2
我可以使用键盘向上和向下箭头以及鼠标悬停来滚动我的下拉菜单。但两者的工作方式各不相同。我想同步这两个动作。也就是说，如果我正在使用键盘并切换到鼠标，它应该从相同的焦点开始并继续，反之亦然。如下图所示，突出显示了 2 个选项。一种是通过鼠标悬停，另一种是通过键盘箭头键。我希望这只是一个。我正在使用 Angular 2，下面是我的代码....我已经处理了大多数其他事情，例如选项卡点击和点击外部以及点击进入结果等。这是我面临的唯一问题。
<input type="text" placeholder="Search" [(ngModel)]=search (input)="filterResults($event.target.value)">
<div *ngIf="searchList.length>0" class="searchdropdown">
<div class="search" (click)="SearchItemSelect(item)" *ngFor="let item of searchList">{{item.value}}</div>
</div>
</div>
这是下拉菜单的正常行为
我可以使用键盘向上和向下箭头以及鼠标悬停来滚动我的下拉菜单。但两者的工作方式各不相同。我想同步这两个动作。也就是说，如果我正在使用键盘并切换到鼠标，它应该从相同的焦点开始并继续，反之亦然。如下图所示，突出显示了 2 个选项。一种是通过鼠标悬停，另一种是通过键盘箭头键。我希望这只是一个。我正在使用 Angular 2，下面是我的代码....我已经处理了大多数其他事情，例如选项卡点击和点击外部以及点击进入结果等。这是我面临的唯一问题。
<input type="text" placeholder="Search" [(ngModel)]=search (input)="filterResults($event.target.value)">
<div *ngIf="searchList.length>0" class="searchdropdown">
<div class="search" (click)="SearchItemSelect(item)" *ngFor="let item of searchList">{{item.value}}</div>
</div>
</div>
这是下拉菜单的正常行为