Javascript 突出显示选定li元素的问题

我想更改所选li元素的背景色，但我的代码没有按预期工作，它更改了背景色，但只更改了一秒钟，我希望它在仍然是所选元素时保持背景色更改，这是我的代码

 $('#campoBuscarProducto').keydown(function(e) {

    if (e.keyCode === 40) {

        ++contador;

        if (contador >= resultado) { contador = 0; }

        if (contador <= resultado - 1) {

            $('#listaDeProductos > li').removeClass('cambiandoProducto');      
            $('#listaDeProductos > li').eq(contador).addClass('cambiandoProducto');
        }
    }

    if (e.keyCode === 38) {

        --contador;

        if (contador < 0) { contador = resultado - 1; }

        if (contador >= 0) {

            $('#listaDeProductos > li').removeClass('cambiandoProducto');      
            $('#listaDeProductos > li').eq(contador).addClass('cambiandoProducto');
        }
    }
}); //Missing close parenthesis :-)

你知道我遗漏了什么或者我的代码有什么问题吗？可能与

keydown

事件有关，谢谢

使用此代码执行

success

功能后，将生成

ul

列表

$.each(datos, function(i) {

    opciones += '<li class="sugerencias">' + datos[i].nombre + '</li>';
});

resultado = datos.length;

$('#coincidenciasBusqueda').show();
$('#coincidenciasBusqueda').html('<ul id="listaDeProductos">'+ opciones +'</ul>');

$。每个（DATO，函数（i）{
opciones+='
'+datos[i].名称+'
；
});
resultado=datos.length；
$（'#concurrenciasbusqueda'）.show（）；
.html（“
”+optiones+”
）；

var contador=$（'ul li'）。长度，resultado=1；
$（'li'）.eq（resultado-1）.addClass（'color'）；
$（'ul'）.keydown（函数（e）{
如果（e.keyCode==40）{
resultado++；
如果（resultado>contador）
resultado=1；
}
如果（e.keyCode==38）{
结果——；
如果（结果为O
var contador=$（'ul li'）。长度，resultado=1；
$（'li'）.eq（resultado-1）.addClass（'color'）；
$（'ul'）.keydown（函数（e）{
如果（e.keyCode==40）{
resultado++；
如果（resultado>contador）
resultado=1；
}
如果（e.keyCode==38）{
结果——；
如果（resultado我试图简化您的索引测试：

HTML:

CSS:

以下是我试图简化索引测试的方法：

HTML:

CSS:

这是我解决的问题，问题是我使用
keydown
listener来运行代码以更改所选
li
元素的背景颜色，但在运行ajax调用之前，我使用
keyup
事件侦听器，这些侦听器与相同的
输入关联，但不同所以这就产生了问题

我用
keypress
解决了
keyup
事件监听器的更改问题，现在它工作得很好，谢谢大家的帮助

这是我的错误，我很抱歉没有更好地解释我是如何运行ajax调用的。
我解决了这个问题，问题是我使用
keydown
listener运行代码来更改所选
li
元素的背景色，但在运行ajax调用之前，我使用了
keyup
事件侦听器，t这些监听器与相同的
输入关联，但功能不同，因此产生了问题

我用
keypress
解决了
keyup
事件监听器的更改问题，现在它工作得很好，谢谢大家的帮助

这是我的错误，我很抱歉没有更好地解释我是如何运行我的ajax调用的。
您的控制台中有错误吗？您也尝试过将
！important
放入CSS中吗？请共享html代码。请阅读以下内容：。尤其是可验证部分-您似乎没有任何明显的错误r代码，因此可能有其他原因导致问题-特别是如果它显示红色表示“仅一秒钟”。没有错误，是的，我尝试过将
！important
添加到CSS中，但它仍然会改变背景颜色，只需一秒钟。请提供相关的html。您的控制台中是否有错误？您是否尝试过将
！important
添加到CSS中？请同时共享html代码。请阅读以下内容：。特别是可验证的部分-代码似乎没有任何明显的错误，因此可能是其他原因导致问题-特别是如果它显示红色表示“仅一秒钟”。没有错误，是的，我尝试将
！important
添加到CSS中，但它仍然会改变背景颜色，只需一秒钟。请提供相关的html？
$.each(datos, function(i) {

    opciones += '<li class="sugerencias">' + datos[i].nombre + '</li>';
});

resultado = datos.length;

$('#coincidenciasBusqueda').show();
$('#coincidenciasBusqueda').html('<ul id="listaDeProductos">'+ opciones +'</ul>');

<input type="text" id="campoBuscarProducto" />
<ul id="listaDeProductos">
  <li class="sugerencias">asd</li>
  <li class="sugerencias">ygjhgh</li>
  <li class="sugerencias">ret</li>
  <li class="sugerencias">87687</li>
  <li class="sugerencias">-0-</li>
</ul>

var contador = 0;
var resultado = 5;
$('#campoBuscarProducto').keydown(function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 40) {
        contador++;
        console.warn(contador);
        if (contador > resultado) { 
          contador = 1;
        }
        $('#listaDeProductos > li').removeClass('cambiandoProducto');      
        $('#listaDeProductos > li').eq(contador - 1).addClass('cambiandoProducto');

    }

    if (e.keyCode == 38) {
        contador--;
        console.warn(contador);
        if (contador == 0) { contador = resultado; }
        $('#listaDeProductos > li').removeClass('cambiandoProducto');      
        $('#listaDeProductos > li').eq(contador - 1).addClass('cambiandoProducto');
    }
});

.cambiandoProducto {

    background-color: red;
}