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

我遇到了这个问题…我有一个作为搜索者工作的输入，当我写一些东西时，它会显示一个ul和匹配列表，它会工作，

和

项是通过AJAX用PHP生成的

这是我的意见

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

新信息：

$('#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);
        }
    });
}

---

}))

每次按箭头键时，我都会给窗口函数一个参数来捕捉值。然后打印出来。就像下面一样

var li=$（'#list>li'）；
他当选了；
$（窗口）.on（'keydown'，函数（e）{
选择var；
如果（e.which==40）{
如果（当选）{
liSelected.removeClass（'background'）；
next=liSelected.next（）；
如果（next.length>0）{
liSelected=next.addClass（'background'）；
selected=next.text（）；
}否则{
liSelected=li.eq（0）.addClass（'background'）；
所选=li.eq（0.text（）；
}
}否则{
liSelected=li.eq（0）.addClass（'background'）；
所选=li.eq（0.text（）；
}
}否则如果（例如，哪个===38）{
如果（当选）{
liSelected.removeClass（'background'）；
next=liSelected.prev（）；
如果（next.length>0）{
liSelected=next.addClass（'background'）；
selected=next.text（）；
}否则{
liSelected=li.last（）.addClass（'background'）；
所选=li.last（）.text（）
}
}否则{
liSelected=li.last（）.addClass（'background'）；
所选=li.last（）.text（）
}
}
console.log（已选择）
});

.背景{
背景：hsla（0,100%，0,0.4）；
}

1
2
3

以及通过JSON的ajax和PHP。
现在，您可以使用箭头键进行选择。您还可以使用CSS自定义下拉列表的外观。
我想您需要的是：

$(function(){

var li = $('#list li'), n = -1, ll = li.length-1;
$('#searchProduct').keypress(function(e){
  var x = e.which;
  li.removeClass('background');
  if(x === 40 || x === 39 || x === 38 || x === 37){
    if(x === 40 || x === 39){
      n++;
      if(n > ll)n = 0;
    }
    else if(x === 38 || x === 37){
      n--;
      if(n < 0)n = ll;
    }
    var ci = li.get(n);
    ci.addClass('background'); $(this).val(ci.text());
  }
});

});

$（函数（）{
var li=$（'#list li'），n=-1，ll=li.length-1；
$（“#搜索产品”）。按键（功能（e）{
var x=e，其中；
li.移除类（“背景”）；
如果（x==40 | | x==39 | | x==38 | | x==37）{
如果（x==40 | | x==39）{
n++；
如果（n>ll）n=0；
}
else if（x==38 | | x==37）{
n--；
如果（n<0）n=ll；
}
var ci=li.get（n）；
ci.addClass（'background'）；$（this.val（ci.text（））；
}
});
});
您可以使用内置数据列表实现箭头键选择

<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">


只需询问您是想在使用箭头键时在输入框上模糊还是想设置所选的li值？@Anami是的，我想获取所选li的值您必须将代码放入AJAX成功函数中，该函数用于查询生成的代码。当然，装载包装器会放在所有东西的外面。如何？我将用AJAX请求的代码更新问题的信息
$(function(){

var li = $('#list li'), n = -1, ll = li.length-1;
$('#searchProduct').keypress(function(e){
  var x = e.which;
  li.removeClass('background');
  if(x === 40 || x === 39 || x === 38 || x === 37){
    if(x === 40 || x === 39){
      n++;
      if(n > ll)n = 0;
    }
    else if(x === 38 || x === 37){
      n--;
      if(n < 0)n = ll;
    }
    var ci = li.get(n);
    ci.addClass('background'); $(this).val(ci.text());
  }
});

});

<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">