在列表中预选值并在选项卡上添加到文本框

Question

我有一个评论框，用户可以在其中键入@以显示他们可以添加到评论中的用户列表。然后将通知这些用户。示例评论可以是：

@steve和@bill你看到@travis了吗？

以下是现有代码：

HTML：

input.comment-text ng-model="comment.text" ng-change="showUserList(comment.text) ng-trim="false"

ul.user-list [ng-show="usersShow"]
  li.user [ng-repeat="user in users" ng-click="addUserToComment(user.username)"]
    span
      strong
        | {{user.username}}
      | {{' : ' + fullName(user)}}

JS：

$scope.showUserList = function(comment) {
  var pattern = /(?:^|\s)@\S*$/;
  $scope.usersShow = pattern.test(comment);
};

$scope.addUserToComment = function(user) {
  $scope.comment.text += user + " ";
  $scope.usersShow = false;
  $('.comment-text').focus();
};

当弹出用户列表时，我希望预先选择第一个用户。如果按Tab键，则会将用户名放入文本框中。此外，他们可以向上和向下箭头并点击任何用户的标签，以将该用户放在评论框中。如何捕获选项卡事件以触发此过程？最好的方法是使用按键上的键码吗？如何将ul转换为可以使用箭头键导航的列表？谢谢你的帮助。