Javascript 首先单击向下键，然后遍历下拉列表，打开typeahead下拉列表_Javascript_Jquery_Css_Angularjs_Angular Ui Bootstrap

Javascript 首先单击向下键，然后遍历下拉列表，打开typeahead下拉列表

javascript jquery css angularjs

Javascript 首先单击向下键，然后遍历下拉列表，打开typeahead下拉列表,javascript,jquery,css,angularjs,angular-ui-bootstrap,Javascript,Jquery,Css,Angularjs,Angular Ui Bootstrap,我在我的角度项目中使用。我的要求是当用户没有输入任何文本时，按向下键打开typeahead下拉列表。我已通过使用成功添加了此功能。这是我的名片 Now down键打开下拉列表，因此它将丢失遍历下拉列表的默认行为（向下移动到下一个选项） index.html <!DOCTYPE html> <html ng-app="plunker"> <head> <link href="//netdna.bootstrapcdn.com/bootstra

我在我的角度项目中使用。我的要求是当用户没有输入任何文本时，按向下键打开typeahead下拉列表。我已通过使用成功添加了此功能。这是我的名片

Now down键打开下拉列表，因此它将丢失遍历下拉列表的默认行为（向下移动到下一个选项）

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
    <script src="ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid" ng-controller="TypeaheadCtrl">
      <input type="text" ng-keydown="show($event)" ng-trim="false" ng-model="selected" empty-typeahead typeahead="state for state in states | filter:$viewValue:stateComparator" class="form-control" />
      <pre ng-show="opened">Model: {{selected | json}}</pre>
    </div>
  </body>

</html>

有没有办法在第一次单击时打开下拉列表，然后在再次单击时移动到下一个选项？

最后，我在打开typeahead下拉列表时设置一个if条件来解决这个问题

$scope.show = function (e) {
    if($scope.selected === undefined){
      var keyCode = e.keyCode || e.which;
      if (keyCode == 40) { //If it's the down key
        $timeout(function () {
            $(e.target).triggerHandler('input');
        });
     }
   }
};

并在

$scope.selected中给出未定义的，如果用户未选择任何项目：
$scope.clearIfEmpty = function () {
    if($scope.selected !== undefined && $scope.selected.length === 0){
      $scope.selected = undefined;  
    }
}

我建议改为使用，它有一个开放的函数，您可以从JavaScription调用该函数，使用此链接可以解决滚动条不移动的问题-
$scope.clearIfEmpty = function () {
    if($scope.selected !== undefined && $scope.selected.length === 0){
      $scope.selected = undefined;  
    }
}