仅使用箭头键（上/下）在搜索列表中导航使用显示块浏览那些列表？ （JavaScript / JQ）

Question

我正在实现产品搜索功能，我希望用户可以通过按键（上/下）进行导航。但我希望用户只能使用显示块浏览该列表项。但是，只要他/她移动到下一个li元素下移键，jquery的.next（）方法就会移动不显示任何下一个li元素。

这是我的代码：

var liSelected;
$(window).keydown(function(e){
    if(e.which === 40){
      var li = $('ul#myUL li:visible');
      // console.log(li);
      // return false;
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected  = $('ul#myUL li:visible').eq(0).addClass('selected');
            }
        }else{
            liSelected  = $('ul#myUL li:visible').eq(0).addClass('selected');
        }

    }else if(e.which === 38){
        // li = $('ul#myUL li:visible');
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = $('ul#myUL li:visible').last().addClass('selected');
            }else{
                liSelected = $('ul#myUL li:visible').last().addClass('selected');
            }
        }else{
            liSelected = $('ul#myUL li:visible').last().addClass('selected');
        }
    }
});