Como fazer busca interna com Java Script

Os motores de busca da Internet vieram para facilitar a vida daqueles que precisam encontrar informações específicas na grande rede mundial. Neste post veja como fazer busca interna com Java Script.

Quanto mais informações um site possuir, maior será a dificuldade para encontrar essas informações. Por conta disso, é indispensável que todo site possua o seu próprio motor de busca.

Antes de qualquer coisa, acesse o site do Google (https://cse.google.com.br) e crie o seu código de pesquisa personalizado. Após isso, siga os procedimentos a seguir.

O código abaixo adapta o motor de busca do Google para fazer buscas apenas dentro de um site específico e exibir os resultados dessa busca em uma página interna do próprio site:

  <script language="javascript">
  
  function verifica_pesquisa() {
  
   var pesq = document.forms["form-pesquisa"].q.value;
	  
   if(pesq == "" || pesq == null) {
	  
      alert('Digite algo no campo de pesquisa.');
      document.forms["form-pesquisa"].q.focus(); 
      return false;		  
   }		    
     document.forms["form-pesquisa"].submit();
  } 
    
 </script>

O script acima valida o termo a ser pesquisado. O código abaixo recebe o termo a ser pesquisado. Você precisa ter o seu código personalizado:

 //mostra resultados em uma página interna 
 <form action="<?php echo "pagina-interna-para-resultados.html" ; ?>" name="form-pesquisa" id="cse-search-box">

 <input type="hidden" name="cx" value="12345678912345678912:1ajuykpgur7" /> código personalizado
 <input type="hidden" name="cof" value="FORID:10" />
 <input type="hidden" name="ie" value="utf-8" />

  caixa onde o usuário digita o termo a ser pesquisado 
 <input type="text" name="q" size="30" /> 

  o que está entre aspas em value é o que irá aparecer no botão de pesquisa 
 <input type="submit" onClick="verifica_pesquisa();" name="sa" value="OK" />
 </form>

Acima você precisa do seu código personalizado para preencher o value.

(pagina-interna-para-resultados.html)

Na página interna, que receberá o resultado da pesquisa, insira os códigos abaixo:

 //Resultado da pesquisa por: <?php echo $_GET['q']; ?>
        
 <script>
  (function() {
    var cx = '12345678912345678912:1ajuykpgur7';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
 </script>

Acima foi usado o PHP para mostrar o valor do termo pesquisado.

Formatar data em campo de texto na digitação em Java Script

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: busca interna | javascript