1

tengo un input que funciona como buscador y cuando dígito muestra una ul dinámica con la lista de coincidencias y funciona.

Este es el input:

introducir la descripción de la imagen aquí

Esta es el Ul:

Después que se genera la lista, se selecciona el primer item de la lista (como imagen), ademas se debe de usar las teclas de flecha (arriba y abajo) para seleccionar uno de los elementos el cual tiene el siguiente codigo:

    var h = 0;
    $("#txtDepProv").keyup(function (e) {
           if (e.keyCode == 38) {                 
            h--;
            if (h >= $("li").length) {
                h = -1;
                return;
            }
            $("#listResultadoDepProv>li").removeClass("itemliactive");
            $("#listResultadoDepProv>li").eq(h).addClass("itemliactive");                
            return;
        };
        if (e.keyCode == 40) {                                    
            h++;
            if (h > $("li").length) {//                    
                console.log($("li").length);
                h = 1;                    
                return;
                }
            $("#listResultadoDepProv>li").removeClass("itemliactive");
            $("#listResultadoDepProv>li").eq(h).addClass("itemliactive")                          
            return;
        };            
        h=0;

} lo que aun no logro es: que al momento que se deslice hacia arriba o abajo, el scroll tambien lo haga, es decir el scroll tiene que seguir al item seleccionado.

1 respuesta 1

0

prueba el siguiente codigo JQuery:

//coloca un id a tu ul, por ejemplo id="lista"
$("#lista li").keyup(function(e) {
    switch(e.which) {
        case 38: //flecha arriba
            $(this).prev().focus();
            break;
        case 40: //flecha abajo
            $(this).next().focus();
            break;
    }
});
//crea una funcion a tu input y llamala cuando presiones una tecla
function selectFirst(){
    $("#lista li").first().focus(); //selecciona el primer elemento de la lista.
}
2
  • Hola John agregue mas detalle a la pregunta ps no logro probar con el codigo que dejaste. Gracias Commented el 17 jun. 2019 a las 15:11
  • Hola Nelson, te dejo este enlace jsfiddle.net/squeral/4jf0n2ff con algo muy parecido a lo que quieres lograr. Lo que interesa para este caso es la parte del scrollTop. Saludos
    – John
    Commented el 18 jun. 2019 a las 0:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.