2
respostas

Quando digito não aparece

Eu vi que tinha uma dúvida parecida com a minha, porem não solucionou meu problema. meu codigo var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function(){ console.log(this.value); var pacientes = document.querySelectorAll(".paciente");

if (this.value.length > 0){
    for (var i = 0; i < pacientes.length; i++){
        var paciente = pacientes[i];
        var tdNome = paciente.querySelector(".info-nome");
        var nome = tdNome.textContent;
        if (nome != this.value){
            paciente.classList.add("invisivel");
        } else {
            paciente.classList.remove("invisivel");
        }
    }
} else {
    for (var i = 0; i < pacientes.length; i++) {
        var paciente = pacientes[i];
        paciente.classList.remove("invisivel");
    }
}

});

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Fala Marta, tudo bem?

O que acontece é que o nome do paciente é Paulo e não paulo, sendo o correto com o P em maísculo, para corrigir isso e não ter que digitar exatamente como o nome está escrito, você pode utilizar a função toLoweCase quer irá transforma toda uma string em letras minúsculas, assim converteremos ambos os valores para minusculo (o valor digitado no input e o nome na tabela) e iremos comparar, assim:

if (this.value.length > 0){
    for (var i = 0; i < pacientes.length; i++){
        var paciente = pacientes[i];
        var tdNome = paciente.querySelector(".info-nome");
        var nome = tdNome.textContent;
        if (nome.toLowerCase() != this.value.toLowerCase()){ //Aqui deixamos ambos os valores como minusculo
            paciente.classList.add("invisivel");
        } else {
            paciente.classList.remove("invisivel");
        }
    }
} else {
    for (var i = 0; i < pacientes.length; i++) {
        var paciente = pacientes[i];
        paciente.classList.remove("invisivel");
    }
}

Espero ter ajudado, bons estudos :D

Ok, obrigada.