javascript - 在输入文本中书写时保持专注于下拉列表

Question

我是 AngularJS 和 Bootstrap 的新手，希望得到一些帮助。

我正在尝试创建一个按输入文本过滤的动态下拉列表。 这是我的代码:

<input id="SelectedCountry" type="text" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true" ng-model="Pass" autocomplete="off"  />
<ul class="dropdown-menu">
  <li data-ng-repeat="r in countrycodes | MyFilter *my filter in the app.filter. works fine*"><a href="#" data-ng-click="selectedcountry.value=r.value">{{r.name}}</a></li>
</ul>

我希望每次用户点击向下箭头键时，焦点都会在下拉列表上(这不会自动发生，为什么？)，所以我写了这段代码:

$(document).on('shown.bs.dropdown', function (event) {
    var dropdown = $(event.target);
    $("input").keydown(function (e) {
        if ((e.which && e.which == 40) || (e.keyCode && e.keyCode == 40)) {
            // Set aria-expanded to true
            dropdown.find('.dropdown-menu').attr('aria-expanded', true);

            // Set focus on the first link in the dropdown
            dropdown.find('.dropdown-menu li:first-child a').focus();

            return false;
        } else {
            return true;
        }
    });
});

我的问题是，当用户按下向下箭头键时，焦点不再位于输入文本上，因此他无法继续书写。

如何制作一个动态下拉列表，用户可以在焦点位于菜单上时继续书写？ 我已经尝试过使用 Jquery 过滤器，但没有成功，因为我必须使用 AngularJs，所以我可以在用户选择他的选项时触发 data-ng-click，此外我还得到了 data-ng- 的选项重复，这样我就不能在 html 中使用默认的“select”和“option”标签。 我到处寻找解决方案都说不能同时关注元素。也许还有另一种选择？因为有很多网站都有这种情况？

谢谢你的帮助

Answer 1

是的，你是对的。不能同时聚焦 2 个元素。