javascript - 如何使用键盘浏览 li 列表？

Question

我有可折叠的下拉菜单ul。我需要使用向上箭头键和向下箭头键浏览它！

以下示例演示了带有上述输入的可协作 ul li 列表。
我在CodePen上有完整的例子

$(document).ready(function(){
// how to navigate to li using up and down arrows in keyboard

  $('#DdlInput').focus(function(){
    $('#mylist').slideDown(200);
  });
  $('#DdlInput').focusout(function(){
    $('#mylist').slideUp(200);
  });
  
$('#DdlInput').on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#mylist li").filter(function() {     $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

#mylist {
  list-style: none;
  width: 200px;
  border: 1px dashed gray;   
  border-radius: .3em;
  padding: 0;
  display: none;
}
#mylist li{
  padding: 5px;
  padding-top:7px;
  border-bottom: 1px dashed gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="DdlInput" type="text"/>
<ul id="mylist">
  <li>About</li>
  <li>Base</li>
  <li>Blog</li>
</ul>

标签： javascriptjquery

Answer 1

我认为这是解决您问题的方法：

$('#DdlInput').focus(function () {
    $('#mylist').slideDown(200);
});
$('#DdlInput').focusout(function () {
    $('#mylist').slideUp(200);
});

var li = $('li');
var liSelected;

$("#DdlInput").keydown(function (e) {
    if (e.keyCode === 40) {
        if (liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.next();
            if (next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else {
            liSelected = li.eq(0).addClass('selected');
        }

        console.log(liSelected[0].innerText);
        $("#DdlInput").val(liSelected[0].innerText);

    } else if (e.keyCode === 38) {
        if (liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if (next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.last().addClass('selected');
            }
        } else {
            liSelected = li.last().addClass('selected');
        }

        console.log(liSelected[0].innerText);

        $("#DdlInput").val(liSelected[0].innerText);
    }
});

#mylist {
    display: none;
}

li.selected {
    background: grey;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="DdlInput" type="text" />
<ul id="mylist">
    <li>About</li>
    <li>Base</li>
    <li>Blog</li>
</ul>