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

Busca de dados na tabela por CEP

Olá comunidade! Estou tendo um problema com um código!

Eu tenho uma tabela com 9 colunas e 137 linhas. Acima dela eu tenho um campo de busca para procurar as lojas ou pelo NOME, ou pelo CEP da mesma.

Eu consegui desenvolver o código para procurar a loja pelo NOME, que é a primeira coluna da tabela. O problema é que eu não tenho uma coluna específica para CEP, só a 6ª coluna é o ENDEREÇO e a 9ª linha é um link que abre o Google Maps com a localização da loja.

Como que eu posso adaptar meu código para que quando eu digito o NOME OU o CEP, a tabela retorne o resultado correto da busca?

<style type="text/css">
.instal {
    margin-left: auto;
    margin-right: auto;
}
h1 {
    padding-top: 40px;
    color: #EE322E;
    font-family: Rubik;
    font-size: 48px;
    weight:300;
    letter-spacing: 0.33px;
    line-height: 57px;
    text-align: center;
}
.oficina {
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    letter-spacing: 0.09px;
    font-family: Lato;
}
.cep {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.07px;
    font-family: Lato;
    weight: 300;
}
input.campos {
    padding-bottom: 10px;
    outline: none;
    border-style: solid;
    border-bottom: 10px;
    border-left: 10px;
    border-right: 10px;
    border-width: 1px;
    border-color: lightgray;
    width: 400px;
}
label {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.09px;
    font-family: Lato;
    weight: 300;
    color: #353535;
    text-align: left;
}
table {
    width: 100%;
    white-space: nowrap;
}
th {
    background-color: #E5E5E5;
    font-family: Rubik;
    weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 17px;
    letter-spacing: 0.06px;
    color: #353535;
    border: 2px solid white;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
}
td {
    Font-family: Lato;
    color: #353535;
    font-size: 14px;
    text-align: center;
    line-height: 17px;
    letter-spacing: 0.06px;
    border: 2px solid #E5E5E5;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
}
div.meio {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
}
img.icone {
    margin-right: 20px;
    position: relative;
    bottom: 20px;
}
img.foto {
    margin-left: 10px;
}
#input {
    border-top: 1px solid lightgray;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    width: 90%;
}
.submit {
    width: 56px;
    position: relative;
    top: 20px;
}
.compacto {
    height: 60px;
    position: relative;
    padding-bottom: 100px;
    bottom: 50px;
}
label {
    position: relative;
    top:30px;
}
</style>
<br>
<br>
<div>
    <h1>
        <img class="icone" margin-right="20px" src="/file/general/icon-office.png" width="83" />Precisa de instala&ccedil;&atilde;o<font color="#353535">?</font>
    </h1>
</div>
<br>
<br>
<p class="oficina">
    A KD Pneus garante a troca gratuita nas oficinas credenciadas, dos pneus comprados conosco.
</p>
<br>
<br>
<p class="cep">
    Digite um CEP ou uma palavra chave no campo abaixo para fazer uma busca
</p>
<br>
<br>
<br>
<form class="form">
    <div class="meio">
        <div class="compacto">
            <label for="input"></label> 
            <br>
            <input id="input" type="text" name="fname" placeholder="CEP ou Nome da Oficina" />
            <input class="submit" onclick="pesquisar();return false;" id="pesquisar" type="image"  src="/file/general/icon-caret-right-red.png" />
        </div>
    </div>
</form>
<script>
let input = document.querySelector("#input");
    input.addEventListener('focusin', function(){
        let label = document.querySelector('label[for="input"]');
        label.textContent = input.placeholder;
        input.placeholder = '';
    });
    input.addEventListener('focusout', function(){
        let label = document.querySelector('label[for="input"]');
        input.placeholder = label.textContent;
        label.textContent = '';
    });

function pesquisar() {
  // Declaração de variáveis.
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table");
  tr = table.getElementsByTagName("tr");

  // Busca todas as linhas da tabela e esconde aquelas que não correspondem à busca.
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
};
</script>

Um exemplo do código funcionando como eu gostaria pode ser encontrado neste site: https://www.kdpneus.com.br/lojas

A plataforma que eu uso não aceita Jquery, então a solução teria que ser em javascript puro.

Desde já agradeço a atenção e o empenho dessa comunidade que tem me ajudado muito!

3 respostas

Olá, Renan! Tudo bom?

Esse link para o GoogleMaps possui o CEP?

Uma das coisas que você pode fazer é pegar o CEP do link para pesquisar. A outra coisa é pesquisar o CEP digitado na busca em uma API de Geocodificação (como a do google mesmo) e buscar pela rua que a api retornar! Tenho um exemplo de uso aqui

Espero ter ajudado!

Abraços

É bem isso que eu preciso! Tentei adaptar esse código no meu mas não consegui porque não dá pra usar JQuery na plataforma que estou usando, e como ainda não possuo muitos conhecimentos em JQuery, fica difícil fazer essa tradução.

É possível usar essa API usando apenas Javascript puro?

solução!

Dá sim!

Primeiro você precisa pegar uma chave nesse link aqui.

Depois vai fazer uma requisição pra api, passando o que foi digitado como argumento, como está nesse link.