-2

Alguien podría indicarme como realizar un autocomplete igual al de la imagen cuyos resultados lo muestra en una tabla propiamente del autocomplete. Espero sus comentarios y/o sugerencias.

introducir la descripción de la imagen aquí

1 respuesta 1

0

Tomando en cuenta que los valores de respuesta los tienes dentro del html en una tabla o lista ocultos, el siguiente script hecho con jQuery hace la coincidencia según la palabra escrita por el ususario y lo muestra.

    $("#filter").keyup(function(){
        // Recupera el texto del campo de entrada y restablece el conteo a cero
        var filter = $(this).val(), count = 0;
        // Recorrer la tabla de respuestas
        $("#table tr td").each(function(){
            // Si el elemento de la tabla no contiene la frase de texto, difumína.
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
            // Mostrar el elemento de la tabla si la frase coincide e incrementa el contador a 1
            } else {
                $(this).show();
                count++;
            }
        });
        // Actualiza el contador
        var numberItems = count;
        // Esto solo muestra en numero de coincidencias
        $("#filter-count").text("Coincidencias = "+count);
    });

Solo necesitas renombrar los id tanto de tu input del buscador, como el de los datos ocultos que quieres mostrar, si los quisieras o tuvieras en una lista cambiarias #table tr td por #lista li.

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.