1
respuesta

Solucion

Esta seria una posible solución.

//Script funcionamiento del filtrado de elementos

//obtiene todos los elementos de la tabla del HTML
var elementoBusqueda = document.querySelector("#busqueda-elementos");

//cambia el parametro de la etiqueta segun el archivo HTML

//entrada de datos para realizar la busqueda de un elemento
elementoBusqueda.addEventListener("input", function () {
    console.log("Realizando busqueda...", this.value); //imprime en consola
    //los datos ingresados de la busqueda del elemento

    //obtiene todos los elementos de la tabla del HTML
    var pacientes = document.querySelectorAll(".paciente");

    if (this.value.length > 0) { //si el tamaño de la entrada de datos es mayor a 0 caracteres
        //itera todos los elementos de la tabla
        for (var i = 0; i < pacientes.length; i++) {
            var paciente = pacientes[i];
            var nombreBusqueda = paciente.querySelector(".info-nombre");
            //obtiene el valor de la clase de cada elemento
            var nombreResultado = nombreBusqueda.textContent;

            /*Como el primer parámetro es el inicio, y queremos comparar desde el inicio de la
            cadena nombre, vamos a utilizar como inicio el valor 0, o sea
            siempre a partir del primer carácter. */
            var compararCaracter = nombreResultado.substring(0, this.value.length);
            //camparando el primer caracter de la busqueda ingresada

            // colocando dos cadenas en minúsculas usando toLowerCase(), 
            //para recién efectuar la comparación, realizando la comparacion con la busqueda
            var compararMinuscula = compararCaracter.toLowerCase(); //compara caracteres en minuscula
            var valorBusquedaMinuscula = this.value.toLowerCase(); //obtiene caracteres en minuscula

            //evalua los caracteres obtenidos de la busqueda
            if (!(valorBusquedaMinuscula == compararMinuscula)) {
                //si es diferente el dato ingresado a los caracteres en minuscula, es decir false
                paciente.classList.add("invisible"); //muestra los elementos
            } else {
                paciente.classList.remove("invisible"); //oculta los elementos
            }
        }
    } else { //si el tamaño de la entrada de datos es menor a 0 caracteres
        for (var i = 0; i < pacientes.length; i++) {
            //itera todos los elementos de la tabla
            var paciente = pacientes[i];
            paciente.classList.remove("invisible");
        } //itera todos los elementos si no hay datos en la busqueda
    } //muestra todos los elementos si no se realiza la busqueda

}); //la funcion permite realizar una busqueda de elementos, si no hay datos de busqueda
//muestra los elementos iniciales, si hay datos coincidentes muestra el elemento buscado
1 respuesta

Hola Leonardo, espero que estés bien!

Gracias por tu participación en nuestro foro. Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

¡Vamos juntos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios