Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

É possivel realizar essa busca retirando os acentos das palavras.

Ex: Tenho dois pacientes cadastrados de nome joão e outro joao, mas gostaria que no campo de pesquisa digitar somente joao e assim retornar os dois resultados joao e joão.

var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function() {
    var registros = document.querySelectorAll(".consulta");

    if (this.value.length > 0) {
        for (var i = 0; i < registros.length; i++) {
            var consulta = registros[i];
            var tdNome = consulta.querySelector(".info-nome");
            var nome = tdNome.textContent;
            var expressao = new RegExp(this.value, "i");



            if (!expressao.test(nome)) {
                consulta.classList.add("invisivel");
            } else {
                consulta.classList.remove("invisivel");
            }
        }
    } else {
        for (var i = 0; i < registros.length; i++) {
            var consulta = registros[i];
            consulta.classList.remove("invisivel");
        }
    }
});
4 respostas
solução!

Oi Alexandre!

Infelizmente os códigos dos caracteres "ã" e "a" não tem relação na tabela unicode. Pra conseguir fazer a busca da maneira que você deseja, uma das possíveis soluções é substituir os caracteres especiais pelos normais utilizando Regex e replace em uma função auxiliar:

function replaceSpecialChars(str)
{
    str = str.replace(/[ÀÁÂÃÄÅ]/,"A");
    str = str.replace(/[àáâãäå]/,"a");
    str = str.replace(/[ÈÉÊË]/,"E");
    str = str.replace(/[Ç]/,"C");
    str = str.replace(/[ç]/,"c");
    // adicionar mais regras caso necessário
    // OBS: são necessárias regras tanto para caracteres minísculos e maiúsculos

    return str.replace(/[^a-z]/gi,'');  // remove caracteres que não são letras
}

Agora basta chamar essa função com nome como parâmetro antes da comparação com a regex do seu código e também em this.value antes de criar a RegEx

// logica de pegar o elemento
var expressao = new RegExp(replaceSpecialChars(this.value), "i");

nome = replaceSpecialChars(nome) // nome sem caracteres especiais

if (!expressao.test(nome)) {
    consulta.classList.add("invisivel");
} else {
    consulta.classList.remove("invisivel") 
}

replaceSpecialChars(this.value) é necessário para que "joão" e "joao" sejam capazes de retornar os resultados esperados.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui! :)

Eduardo, tudo bem?

Obrigado pela ajuda, nesse caso funcionou em partes quando eu digito "joã" ele ja me mostra 2 resultados "joao e João" ate ai tudo bem, mas quando eu termino de digitar o restante da palavra "joão" ele so mostra um resultado que é "joão" não consegui entender o motivo.

var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function() {
    var registros = document.querySelectorAll(".consulta");

    if (this.value.length > 0) {
        for (var i = 0; i < registros.length; i++) {
            var consulta = registros[i];
            var tdNome = consulta.querySelector(".info-nome");

            var nome = tdNome.textContent;

            var expressao = new RegExp(replaceSpecialChars(this.value), "i");

            nome = replaceSpecialChars(nome) // nome sem caracteres especiais         

            if (!expressao.test(nome)) {
                consulta.classList.add("invisivel");
            } else {
                consulta.classList.remove("invisivel");
            }
        }
    } else {
        for (var i = 0; i < registros.length; i++) {
            var consulta = registros[i];
            consulta.classList.remove("invisivel");
        }
    }
});

function replaceSpecialChars(str)
{
    str = str.replace(/[ÀÁÂÃÄÅ]/,"A");
    str = str.replace(/[àáâãäå]/,"a");
    str = str.replace(/[ÈÉÊË]/,"E");
    str = str.replace(/[èéêë]/,"e");
    str = str.replace(/[ÌÍÎÏ]/,"I");
    str = str.replace(/[ìíîï]/,"i");
    str = str.replace(/[ÒÓÔÕÖ]/,"O");
    str = str.replace(/[òóôõö]/,"o");
    str = str.replace(/[ÙÚÛÜ]/,"U");
    str = str.replace(/[ùúûü]/,"u");
    str = str.replace(/[Ç]/,"C");
    str = str.replace(/[ç]/,"c");
    // adicionar mais regras caso necessário
    // OBS: são necessárias regras tanto para caracteres minísculos e maiúsculos

    return str.replace(/[^a-z]/gi,'');  // remove caracteres que não são letras
}

Oi Alexandre!

Só pra confirmar uma coisa: no seu código HTML você utilizou a classe "consulta" em vez de "paciente"?

Peguei o código HTML do instrutor e coloquei o seu script, fazendo apenas a mudança do querySelector para ".paciente" em vez de ".consulta e funcionou como esperado.

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

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

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

Se ainda não estiver dando certo, posta aqui o seu HTML pra eu dar uma olhada. Aguardo seu retorno.

Oi Eduardo.

Deu certo, era o content type do arquivo alterei e funcionou. Obrigado.