提前输入控件的向上/向下箭头键问题（角度引导UI）

小编典典

提前输入控件的向上/向下箭头键问题（角度引导UI）

css

勾选此PLNKR，我已经实现预输入型控制，默认情况下，提前控制，他们不设置任何最大高度或高度名单，但按规定我必须列出的修复高度110px。因此，当我们一次拥有更长的列表时，将仅显示4个数据，而向下滚动则可以看到其余数据。当用户单击向上/向下滚动箭头时，滚动正常，但不适用于键盘上/向下键。

该问题的解释步骤如下：

1.输入一些东西（例如“ a”）以提前输入数据（将填充列表）
2. 按向下箭头键（焦点将在列表项上）
3. 按向下箭头键4-5次以进一步向下移动（当我们向下移动到列表时，滚动不会移动。）
4. 它始终显示列表中的前4个项目。理想的行为是应该改变。
用户可以通过手动单击滚动来滚动，但是使用箭头键不会滚动。

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
 <script src="example.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 <link href="style.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
  <h4>Static arrays</h4>
  <pre>Model: {{selected | json}}</pre>
  <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
 </div>
</body>
</html>

CSS

.dropdown-menu{
 height:110px;
 overflow:auto;
}

javascript datalist

$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

阅读 387

2020-05-16

共1个答案

小编典典

以下是我需要使其生效的更改：

在typeaheadMatch指令中添加了以下行（plunker中的ui.bootstrap.typeahead.js文件的第335行）

element[0].focus();

添加的shouldFocus指令（行-314 -350）

.directive('shouldFocus', function(){
  return {
   restrict: 'A',
   link: function(scope,element,attrs){
     scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
       element[0].scrollIntoView(false);
     });
   }
 };
})

最后在li（第372行）中添加了指令

should-focus=\"isActive($index)\"

2020-05-16