1
resposta

Fazendo um buscador interno

Olá Pessoal,

Estou fazendo um site e para isso preciso de fazer um sistema de busca interna onde ele apresenta os resultados e tbm uma mensagem (que pode ser o um alert) caso o objeto pesquisado não tenha no site. Olhando tutoriais, fiz esse codigo:

HTML:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="buscador.css">



    <title>Buscador</title>
</head>

<body>
    <div class="buscador">
        <form action="" method="submit" class="pesquisa">
            <input type="texte" name="buscador" value="" placeholder="O que vamos ver hoje?" id="buscar"
                onkeyup="pesquisa()">
            <button type="submit">Enviar</button>
        </form>
    </div>

      <div class="filmes">
        <ul id="disponiveis">
            <li>
                <a href="#">Soldado Ryan</a>
            </li>
            <li>
                <a href="#">Rambo</a>
            </li>
            <li>
                <a href="#">Vingadores</a>
            </li>
            <li>
                <a href="#">O homem que copiava</a>
            </li>
            <li>
                <a href="#">Legalmente Loira</a>
            </li>
            <li>
                <a href="#">Jurassic Park</a>
            </li>
            <li>
                <a href="#">O pianista</a>
            </li>
            <li>
                <a href="#">Imperio do Sol</a>
            </li>
            <li>
                <a href="#">13 Horas</a>
            </li>
            <li>
                <a href="#"> Alladin</a>
            </li>
            <li>
                <a href="#"> Speed Racer</a>
            </li>
            <li>
                <a href="#"> Circulo de Fogo</a>
            </li>
        </ul>
    </div>
    <script src="pesquisa.js"></script>

</body>

</html>

JS

function pesquisa() {
    var busca;
    var filtro;
    var ul;
    var li;
    var a;
    var i;
    busca = document.getElementById("buscar");
    filtro = busca.value.toUpperCase();
    ul = document.getElementById("disponiveis");
    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filtro) > -1) {
            li[i].style.display = "";
        }


          else {
            li[i].style.display = "none";
        }
    }
}

O codigo funciona, mas não consigo incluir a mensagem caso o item desejado não tenha na lista. Podem me ajudar?

1 resposta

Olá André, tudo bem?

Peço desculpas pela demora em obter um retorno

Fiz algumas alterações no código a fim de adicionar uma condição caso tenhamos o item na lista retorne uma mensagem de erro, como exemplificado no código mais abaixo:

function pesquisa() {
  var busca;
  var filtro;
  var ul;
  var li;
  var a;
  var i;
  var encontrado = false; // Variável para verificar se o item foi encontrado

  busca = document.getElementById("buscar");
  filtro = busca.value.toUpperCase();
  ul = document.getElementById("disponiveis");
  li = ul.getElementsByTagName("li");

  for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      if (a.innerHTML.toUpperCase().indexOf(filtro) > -1) {
          li[i].style.display = "";
          encontrado = true;
      } else {
          li[i].style.display = "none";
      }
  }

  // Exibir mensagem caso o item não seja encontrado
  if (!encontrado) {
      alert("O item pesquisado não está disponível no site.");
  }
}

Observe que foi adicionada a variável "encontrado" para rastrear se o item foi encontrado durante a iteração da lista. Se nenhum item for encontrado, exibimos um alerta com a mensagem "O item pesquisado não está disponível no site." ou uma mensagem escolhida por ti é claro.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!