使用 Javascript (jQuery) 使用箭头键（向上和向下）选择 li 元素

Question

我遇到了这个问题……我有一个作为搜索器工作的输入，当我写一些东西时它显示一个带有匹配列表的 ul 并且它有效， <ul> 和 <li> 项目通过 AJAX 用 PHP 生成

这是我的输入

<input type="text" class="form-control" id="searchProduct" placeholder="Search..." />

这是 <ul>

 <ul id="list">
    <li id="match1" class="itemList"></li>
    <li id="match2" class="itemList"></li>
    <li id="match3" class="itemList"></li>
</ul>

生成列表后，焦点仍在输入上，没关系，但我想使用箭头键（向上和向下）选择其中一项

我正在尝试使用我在另一个答案中看到的代码，但它对我不起作用，我知道我做错了什么，但我无法弄清楚问题是什么……这是 javascript 代码

var li = $('#list > li');
var liSelected;
$(window).on('keydown', function(e){
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('background');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('background');

            }else{
                liSelected = li.eq(0).addClass('background');
            }
        }else{
            liSelected = li.eq(0).addClass('background');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('background');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = next.addClass('background');

            }else{

                liSelected = li.last().addClass('background');
            }
        }else{

            liSelected = li.last().addClass('background');
        }
    }
});

新信息：

 $('#searchProduct').keyup(function() {

var search = $(this).val();

if (search != '') {

    $.ajax({

        type: 'post',
        cache: false,
        url: '../includes/procedures/autocomplete.php',
        data: { search: search },

        success: function(datos) {

            $('#coincidenciasBusqueda').show();
            $('#coincidenciasBusqueda').html(datos);
        }
    });
}

});

原文由 Professor Zoom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可以使用内置的datalist来实现方向键选择

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<input type="submit">

原文由 Rui Wang 发布，翻译遵循 CC BY-SA 4.0 许可协议