我如何瞄准或聚焦当输入被聚焦时激活的下拉列表li

How do i target or focus drop-down li which is active when a input is focused

本文关键字：聚焦 激活 li 下拉列表 输入 何瞄准      更新时间：2023-09-26

JQUERY

$(".share-drop .dropdown-notif").keydown(function (e) {
        e.preventDefault();
        $(this).parents('.share').find('.share-drop .dropdown-notif').show();
        if ($(this).val() == '') {
            $('.share-drop .dropdown-notif').hide();
        }
        if (e.which == 40) {
            var next = $('.selected').removeClass('selected').next('li');
            next = next.length > 0 ? next : $('.focus li:eq(0)');
            next.addClass('selected').children('a').focus();
        } else if (e.which == 38) {
            var prev = $('.selected').removeClass('selected').prev('li');
            prev = prev.length > 0 ? prev : $('.focus li').last();
            prev.addClass('selected').children('a').focus();
        }
    });

我有一个下拉选项，它将在输入文本的keyup功能上触发。我需要使用我的上下箭头键来选择这些选项。我一直在尝试使用keydown，因为我无法进一步移动。有人能帮我吗。提前谢谢。

这是DEMO

我对你的小提琴做了一些更改，在你打字后，它开始为上下键工作；例如键入"te"，然后上下按：

http://jsfiddle.net/c9U3s/2/

keydown事件绑定需要在输入元素本身上，并且需要允许preventDefault:

$(".input-hold input").keydown(function (e) {
        //e.preventDefault();

你需要一个初始选择的类，这样你的逻辑才能成功地启动，所以我把它添加到HTML:中

<li class="selected"><a>testmail@test.com</a>

我认为还有几个bug需要解决(例如，当你按下向下键到达列表末尾时会发生什么？(，但这有望让你开始。

这向您展示了如何控制下拉列表的滚动顶部，以便您可以滚动查看所选元素：

http://jsfiddle.net/c9U3s/3/

但同样，需要做一些工作来完善它，使其真正好看。

相关文章：