2

O script que vou postar logo abaixo copiei da resposta dessa pergunta: Lista estática com busca usando JavaScript em vez de PHP, que foi feita aqui na comunidade.

    window.onload=function(){
    var filtro = document.getElementById('filtro-nome');
    var tabela = document.getElementById('lista');
    filtro.onkeyup = function() {
        var nomeFiltro = filtro.value;
        for (var i = 1; i < tabela.rows.length; i++) {
            var conteudoCelula = tabela.rows[i].cells[0].innerText;
            var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
            tabela.rows[i].style.display = corresponde ? '' : 'none';
        }
    }
}

Direto ao assunto! Preciso que busque todos os nomes de livros da tabela (66 livros), atendendo os critérios postei apenas parte do código logo abaixo, porem só está buscando o primeiro nome, acho que é porque o script busca a linha (rows), e eu não sei como fazer para buscar nos outros campos, se eu digito Juízes ou Rute por exemplo... não busca! Pode ver aqui se quiser.

        <table id="lista" class="degrade-tbl">
            <thead>
                <tr>
                    <th><div>Pesquisa</div><div><input id="filtro-nome"/></div>
        </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="">Gênesis</a></td>
                    <td><a href="">Êxodo</a></td>
                    <td><a href="">Levítico</a></td>
                    <td><a href="">Números</a></td>
                </tr>
                <tr>
                    <td><a href="">Deuteronômio</a></td>
                    <td><a href="">Josué</a></td>
                    <td><a href="">Juízes</a></td>
                    <td><a href="">Rute</a></td>
                </tr>
        </tbody>
    </table> 

Encontrei esse script em Jquery, mas no GitHub só permite HTML, CSS, Java Script. Alguém poderia me ajudar por gentileza?

Desde já agradeço - Obrigado!

Meu projeto está no GitHub como: bibliasagrada, caso queiram dar uma olhada!

Não se esqueçam que JESUS voltará para buscar todos aqueles que creem! Meditem na palavra de Jesus no evangelho de João capitulo 14.

Fiquem com Deus!

PAZ!

2
  • De onde vêm as palavras a procurar? Tens um <input> no HTML ou vem do JavaScript?
    – Sergio
    Commented 2/08/2020 às 4:58
  • Bom dia @Sergio. As palavras vem da pagina index no próprio HTML e o <input> está na quarta linha do segundo código. Vem do HTML.
    – Marcus
    Commented 2/08/2020 às 12:33

1 Resposta 1

1

Podes fazer isso assim:

const input = document.getElementById('filtro-nome');
const trs = [...document.querySelectorAll('#lista tbody tr')];

input.addEventListener('input', () => {
  const search = input.value.toLowerCase();
  trs.forEach(el => {
    const matches = el.textContent.toLowerCase().includes(search);
    el.style.display = matches ? 'block' : 'none';
  });
});
<table id="lista" class="degrade-tbl">
  <thead>
    <tr>
      <th>
        <div>Pesquisa</div>
        <div><input id="filtro-nome" /></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="">Gênesis</a></td>
      <td><a href="">Êxodo</a></td>
      <td><a href="">Levítico</a></td>
      <td><a href="">Números</a></td>
    </tr>
    <tr>
      <td><a href="">Deuteronômio</a></td>
      <td><a href="">Josué</a></td>
      <td><a href="">Juízes</a></td>
      <td><a href="">Rute</a></td>
    </tr>
  </tbody>
</table>

2
  • Você é uma benção meu irmão. Deus te abençoe! Muito obrigado de coração. Em relação a acentuação @Sergio, por exemplo Gênesis tem o acento circunflexo no 'e', se eu não colocar não vai aparecer. Daria muito trabalho pra ignorar, e fazer a busca mesmo se não acentuar?
    – Marcus
    Commented 2/08/2020 às 12:56
  • @Marcus em JavaScript isso é meio dificil. Dá uma olhada aqui para inspiração: pt.stackoverflow.com/q/148180/129
    – Sergio
    Commented 2/08/2020 às 13:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .