css - typeahead 控件的向上/向下箭头键问题( Angular Bootstrap UI)-6ren

css - typeahead 控件的向上/向下箭头键问题( Angular Bootstrap UI)

转载作者：技术小花猫更新时间：2023-10-29 10:55:11

25

4

检查这个PLNKR ，我已经实现了typeahead控制，默认情况下，在提前输入控件中，他们没有设置任何最大高度或要列出的高度，但根据要求，我必须将列表的高度固定为 110px。所以，当我们有更长的列表时，一次只会显示 4 个数据，其余的可以通过向下滚动看到。用户单击向上/向下滚动箭头时滚动有效，但它不适用于键盘向上/向下键。

问题按步骤解释:-

键入一些内容，例如“a”以提前获取数据(列表将被填充)
按向下箭头键(焦点将在列表项上)
按向下箭头键 4-5 次进一步向下(当我们遍历向下列表，滚动不会移动。)
它总是显示列表中的前 4 项。理想的行为是它应该转变。

用户可以通过手动单击滚动来滚动，但使用箭头键它不会滚动。

Type "a" and traverse down to list with down-arrow key scrolling is not working.

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 数据列表

$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'];

最佳答案

Here is the working plunker

在此，我按照 answer 中的建议覆盖了 ui-bootstrap typeahead .

以下是我需要进行的更改才能使其正常工作:

在 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)\"

关于css - typeahead 控件的向上/向下箭头键问题( Angular Bootstrap UI)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27705490/

25

4

0

文章推荐： iOs Segue 动画从左到右(水平)

文章推荐： iOS:使用 self 和带变量的下划线(_)

文章推荐： ios - UITextField 没有得到键盘输入

excel - 查找范围内第一次出现的值，向上
如果我有如下列， 1 2 2 1 3 4 5 我如何找到从已知值向上的特定数字的第一次出现，比如 4。我知道 4 在列中的位置，我希望第一次出现 1 的行号从 4 向上(行号 4在这种情况下)。我的
javascript - 向上/向下移动时在窗口中保留所选选项
我这里有一个 fiddle http://jsfiddle.net/BB3JK/47/我改编自上一个问题( How can I move selected option in multiselect
java - 向上/向下滚动时检查复选框缺失
大家好，我的应用程序遇到问题。我的复选框中的复选框，一旦我选中该复选框并向下/向上滚动，该复选框就消失了，我不知道这是怎么发生的。谁能帮我这个？谢谢您的帮助 :)这是我的代码: public clas
jquery - 向上/向下滚动到页面上的不同区域
我想使用 jQuery scrollTo 函数或其他一些类似的函数来实现以下功能，以达到相同的结果。我的页面上基本上会有一个 DIV 部分，其中包含大约 10 个类别 URL 链接。例如: div
jquery - 向上/向下滑动
我有这个标记 Sample 1 Sample 2 Sample 3 Sample 4
C# 向上/向下移动项目
我得到了一个包含项目的列表。他们都有一个“排序”列。排序列是int类型，并且是唯一的。场景: sort 1; sort 2; sort 3; 如果用户在列表中向上移动一个项目(例如排序 3)(例如到
JavaScript:向上/向下滚动时突出显示一行
在我的网页上，我在一个可滚动的 DIV 中放置了一个表格。当我向下滚动时，我想突出显示表格中最可见的中间行。我该怎么做？我发现以下脚本接近我的期望 --> www.rgagnon.com/jsd
python - 为什么训练期间损失曲线会出现大幅跳跃(向上)？
我已经训练了完全相同的模型(使用完全相同的训练数据集)两次，但结果非常不同，而且我对它们的损失曲线的行为感到困惑。第一个实验的损失曲线(红色曲线)在第一个时期结束时突然上升，然后缓慢稳定下降。但是
jquery - 向上/向下滑动下拉菜单
我希望主导航的子菜单在鼠标悬停时向下滑动并在鼠标移开时向上滑动。以下是我正在处理的页面:http://jaspreetkaur.com/marg-moll/ 以下是我尝试创建效果的 jQuery 代
ios - 向上/向下计数动画
我有一个 UIPageViewController，其中每个 VC 的中心都有一个数字。我希望当我从一个 View 滑动到另一个 View 时，数字将从 0 开始并向上计数，直到达到正确的数字(或者
Javascript 向上/向下计数脚本显示登录以来的时间
我一直在谷歌搜索，但找不到正确的脚本。也许有人可以指出我正确的方向？我需要显示用户自访问某个页面以来在网站上处于事件状态的时间。我正忙于测试站点，例如用户有 1 小时来完成测试，因此我需要显示用户忙
javascript - 向上/向下箭头滚动不起作用
向上/向下箭头滚动在 jquery scrollify 插件中不起作用。我想使用页面向上/向下按钮和向上/向下箭头按钮单击进行滚动。页面向上/向下箭头工作正常，正如我所期望的。向上/向下按钮单击不随着
javascript - 向上/向下计数数组动画
我想在按下左右箭头时使用数组创建一个上下计数动画。我有 3 个数组，每个箭头将链接到一个 ID。 var KEY = { LEFT: 37, RIGHT: 39 } $(function(
javascript - 向上/向下移动时颜色变化
我对那个 JS 有点问题.. - 有一个 divs 并且这是在随机变化的行中自动变化的... 我需要将向上移动的 div 的颜色更改为绿色.. div 正在向下移动以更改为红色.. 我尝试这样做，但我
javascript - 向上/向下键盘箭头自动滚动
我希望能够使用我的键盘键在 ul 列表中滚动。经过几次尝试后，我成功了。不幸的是，我遇到了一个很长的列表的问题。我希望能够通过提供 css 规则 overflow:auto; 来滚动浏览它们；键盘
jquery - 向上/向下滑动元素并在某个点折叠？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
c# - 当已经按下第二个键时如何检测键向下/向上
在我的应用程序中，我允许用户通过使用 ProcessCmdKey 按住右箭头键来滚动电影。现在我想让用户能够在需要时提高滚动速度。理想情况下，用户应该能够按住右箭头键，然后当他决定提高速度时，他应该在
Android smoothScrollToPosition 向上
我已经在 listview 上设置了 smoothScrollToPosition 并且效果很好!但是...我宁愿将位置放在 listview 的顶部，而不是仅仅放在屏幕上(如果需要向下滚动，则主要放
jquery - 向上/向下滚动到带有固定按钮的部分
我想构建一个脚本来向上/向下滚动到页面的部分标记。我的源代码如下所示: HTML: UP DOWN First Second Third Fourth CSS: section{
c# - ComboBox 向上/向下箭头键在项目重新填充后发出
我正在使用 Google 搜索结果实现创建一个自定义 ComboBox 控件，但我在使用箭头键时遇到了一些问题。问题详情请观看此视频，因为我演示了向上和向下箭头键的问题，并查看输出面板。 http

首页

博学

6Ren·AI

商城

css - typeahead 控件的向上/向下箭头键问题( Angular Bootstrap UI)