Artigo: Pesquisa dinâmica com Ajax, Banco de Dados e PHP - Gigasystems

PHP

Em por

pesquisa-dinamica-com-ajax-banco-de-dados-e-php
Pesquisa dinâmica com Ajax, Banco de Dados e PHP

No artigo de hoje vamos aprender a utilizar uma poderosa ferramenta para pesquisa dinâmica sem reload de páginas para seus relatórios, buscas no site e etc.

Pesquisa dinamica com php e ajax

Há muitas hipóteses de pesquisa ou busca de dados, basta adequar o projeto a sua necessidade, pois o conceito será o mesmo sobre Ajax e BD.

Bem iniciamos nosso projeto criando nosso Banco de Dados para realizar a pesquisa através do formulário. Para exemplo criei um BD chamado pesquisa, e uma tabela chamada cliente com alguns registros, lembrando que os nomes são opcionais, pois você pode dar os nomes que quiser.

 CREATE DATABASE pesquisa; USE pesquisa; CREATE TABLE IF NOT EXISTS `cliente` ( `idCliente` int(11) NOT NULL AUTO_INCREMENT, `nome` varchar(200) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(200) COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (`idCliente`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; 

Criado nosso BD e nossa tabela vamos inserir alguns registros para exemplo:

 INSERT INTO `cliente` (`idCliente`, `nome`, `email`) VALUES (1, 'Leonardo Martins', 'leo.piracaia@hotmail.com'), (2, 'Joaquim Silva', 'joa@hotmail.com'), (3, 'Ana Carvalho', 'ana@hotmail.com'), (4, 'Everton José', 'everton@hotmail.com'); 

Pronto já temos nosso BD criado para pesquisa, vamos a nossa página HTML agora.

Em nossa página HTML é muito importante não esquecer de fazer o download do Jquery para nosso Ajax funcionar.

Feito seu download inclua ele no head de seu site assim:

 <script type="text/javascript" src="js/jquery-2.1.0.js"></script>

Feito isso vamos criar nosso código em JavaScript, no caso, a chamada Ajax.

 <script type="text/javascript"> $(document).ready(function(){ //Aqui a ativa a imagem de load function loading_show(){ $('#loading').html("<img src='img/loading.gif'/>").fadeIn('fast'); } //Aqui desativa a imagem de loading function loading_hide(){ $('#loading').fadeOut('fast'); } // aqui a função ajax que busca os dados em outra pagina do tipo html, não é json function load_dados(valores, page, div) { $.ajax ({ type: 'POST', dataType: 'html', url: page, beforeSend: function(){//Chama o loading antes do carregamento loading_show(); }, data: valores, success: function(msg) { loading_hide(); var data = msg; $(div).html(data).fadeIn(); } }); } //Aqui eu chamo o metodo de load pela primeira vez sem parametros para pode exibir todos load_dados(null, 'pesquisa.php', '#MostraPesq'); //Aqui uso o evento key up para começar a pesquisar, se valor for maior q 0 ele faz a pesquisa $('#pesquisaCliente').keyup(function(){ var valores = $('#form_pesquisa').serialize()//o serialize retorna uma string pronta para ser enviada //pegando o valor do campo #pesquisaCliente var $parametro = $(this).val(); if($parametro.length >= 1) { load_dados(valores, 'pesquisa.php', '#MostraPesq'); }else { load_dados(null, 'pesquisa.php', '#MostraPesq'); } }); }); </script>

Perceba que esse script vai ser chamado assim que a página ser carregada e logo chamando nossa função load_dados(), na qual mostraremos todos os registros da tabela cliente sem filtro ainda, esse parâmetro pode ser modificado de acordo com sua necessidade, mostrando registros ou não ou já mostrando algum registro especifico quando a página for carregada.

 //primeiro parâmetro seria o valor digitado no form, como ainda não //digitamos nada, passamos null como valor, pois assim ele retornará todos //os registro da tabela cliente. //segundo parâmetro é a página onde será feita a pesquisa, é a página para //onde vamos mandar os dados digitados no form //terceiro parâmetro é a div que será mostrada o resultado da pesquisa //retornado pela página que enviamos os dados load_dados(null, 'pesquisa.php', '#MostraPesq'); 

Nosso HTML ficara dessa maneira.

 <center> <article> <form name="form_pesquisa" id="form_pesquisa" method="post" action=""> <fieldset> <legend>Digite o nome a pesquisar</legend> <div class="input-prepend"> <span class="add-on"><i class="icon-search"></i></span> <input type="text" name="pesquisaCliente" id="pesquisaCliente" value="" tabindex="1" placeholder="Pesquisar cliente..." /> </div> </fieldset> </form> <div id="contentLoading"> <div id="loading"></div> </div> <section class="jumbotron"> <div id="MostraPesq"></div> </section> </article> </center>

Lembrando que o name do input pesquisaCliente quando modificado para outro nome, tem que ser modificado em todos os lugares, se não haverá erros.

Através do nosso evento keyup no input pesquisaCliente, a cada tecla digitada, ou algum valor que você determinará no if de quantidade de caracteres, ele fará uma pesquisa ao banco de dados verificando se existe algum registro que você digitou como parâmetro em nossa página pesquisa.php, pois nela será onde iremos fazer acesso ao nosso banco de dados e retornar o resultado de nossa pesquisa se houve sucesso ou não.

Nossa página pesquisa.php ficará assim:

 <?php //recebemos nosso parâmetro vindo do form $parametro = isset($_POST['pesquisaCliente']) ? $_POST['pesquisaCliente'] : null; $msg = ""; //começamos a concatenar nossa tabela $msg .="<table class='table table-hover'>"; $msg .=" <thead>"; $msg .=" <tr>"; $msg .=" <th>#</th>"; $msg .=" <th>Nome:</th>"; $msg .=" <th>E-mail:</th>"; $msg .=" </tr>"; $msg .=" </thead>"; $msg .=" <tbody>"; //requerimos a classe de conexão require_once('class/Conexao.class.php'); try { $pdo = new Conexao(); $resultado = $pdo->select("SELECT * FROM cliente WHERE nome LIKE '$parametro%' ORDER BY nome ASC"); $pdo->desconectar(); }catch (PDOException $e){ echo $e->getMessage(); } //resgata os dados na tabela if(count($resultado)){ foreach ($resultado as $res) { $msg .=" <tr>"; $msg .=" <td>".$res['idCliente']."</td>"; $msg .=" <td>".$res['nome']."</td>"; $msg .=" <td>".$res['email']."</td>"; $msg .=" </tr>"; } }else{ $msg = ""; $msg .="Nenhum resultado foi encontrado..."; } $msg .=" </tbody>"; $msg .="</table>"; //retorna a msg concatenada echo $msg; ?>

Primeiro de tudo e mais importante, é primeira linha onde vamos receber nosso parâmetro vindo do form, importante que os nomes estejam certos para passagem correta de valores. Feito isso começamos a montar nossa tabela em uma variável concatenando ela, depois fazemos nossa conexão com nosso BD e verificamos se na tabela cliente existe um registro que tenha aquele parâmetro recebido, se existir ele resgata os valores da tabela do BD e add na tabela do HTML, caso não haja resultado, exibe uma mensagem de que não houve resultado na busca.

Alguns conceitos sobre classe, banco de dados não foram citados aqui pois o foco deste artigo não é esse, mas se houver dúvidas sobre o assunto acesse nossos artigos e leia um pouco a respeito e se precisar se aprofunde mais sua pesquisa para um bom entendimento.

Para baixar o exemplo funcional completo clique Aqui....

Dúvidas, críticas ou sugestões comentem abaixo, e bons estudos !!!

Olá, deixe seu comentário para Pesquisa dinâmica com Ajax, Banco de Dados e PHP

Já temos 32 comentário(s). DEIXE O SEU :)
Shimon Covitch

Shimon Covitch

Não fazes ideia do quanto isso ajudou!

Mais estou tendo dificuldade em adpta-lo com meu código... como faço para substituir o input pelo select option no html como meu bloco de pesquisa.
★★★★★DIA 30.03.20 04h20RESPONDER
N/A
Enviando Comentário Fechar :/
Shimon Covitch

Shimon Covitch

Cara você não faz ideia como isso me ajudou

Mais tenho uma dúvida!

Olá pessoal! como faço isso substituindo o ""

para

Ana Carvalho
Everton José
...


pergunto isso para um outro sistema
★★★★★DIA 29.03.20 19h47RESPONDER
N/A
Enviando Comentário Fechar :/
Hans Designer

Hans Designer

Funciona perfeitamente, fiz só uma correção no arquivo pesquisa.php para poder aparecer apenas quando digitar.
Segue abaixo:

if(isset($_POST['pesquisaCliente'])):

//recebemos nosso parâmetro vindo do form
$parametro = isset($_POST['pesquisaCliente']) ? $_POST['pesquisaCliente'] : null;
$msg = "";
//começamos a concatenar nossa tabela
$msg .="";
$msg .=" ";
$msg .=" ";
$msg .=" #";
$msg .=" Nome:";
$msg .=" E-mail:";
$msg .=" ";
$msg .=" ";
$msg .=" ";

//requerimos a classe de conexão
require_once('class/Conexao.class.php');
try {
$pdo = new Conexao();
$resultado = $pdo->select("SELECT * FROM cliente WHERE nome LIKE '$parametro%' ORDER BY nome ASC");
$pdo->desconectar();

}catch (PDOException $e){
echo $e->getMessage();
}
//resgata os dados na tabela
if(count($resultado)){
foreach ($resultado as $res) {

$msg .=" ";
$msg .=" ".$res['idCliente']."";
$msg .=" ".$res['nome']."";
$msg .=" ".$res['email']."";
$msg .=" ";
}
}else{
$msg = "";
$msg .="Nenhum resultado foi encontrado...";
}
$msg .=" ";
$msg .="";
//retorna a msg concatenada
echo $msg;

endif;
★★★★★DIA 06.03.20 14h58RESPONDER
Marcos Martins, Francisco C de Souza
Enviando Comentário Fechar :/
myguel abreu

myguel abreu

Olá seu código é ótimo, eu adaptei para a minha precisão, eu retirei estrutura da tabela, e queria saber como faço para retornar o resultado da pesquisa dentro do autocomplete do próprio input, poderia me ajudar??
★★★★★DIA 08.02.20 01h17RESPONDER
N/A
Enviando Comentário Fechar :/
João Rafael

João Rafael

Deu tudo certo! Valeu imenso pela ajuda!
★★★★★DIA 05.12.19 16h49RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
lauri lourenco

lauri lourenco

nossa muito obrigada me ajudou mt
★★★★★DIA 24.10.19 14h24RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
Rodrigo Lima

Rodrigo Lima

Caso eu nao consiga criar um banco chamado pesquisa. Caso venha alterar o nome do banco é preciso alterar algo no documento ?
★★★★★DIA 23.07.19 15h26RESPONDER
N/A
Enviando Comentário Fechar :/
Marcos Martins

Marcos Martins

Sim, você deve alterar para o nome do seu Banco Dados, senão ele não vai encontrar.

★★★★★DIA 31.07.19 15h02RESPONDER
N/A
Enviando Comentário Fechar :/
Rafaela Mania

Rafaela Mania

Não sei se ainda precisa saber, porém sim precisa ser alterado no "conexao.class.php" o nome do banco e caso possua senha precisa ser alterada tambem. se for alterar os nomes das tabelas precisa ser alterado nos outros arquivos o SELECT e os $_POST para mostrar
★★★★★DIA 09.11.21 09h02RESPONDER
N/A
Enviando Comentário Fechar :/
Walter Quintela

Walter Quintela

Excelente!!
Segui seu tutorial e deu tudo certinho, agradeço imensamente por sua colaboração.
Na hipótese de ter outro campo na tabela , "cidade", por exemplo, como eu faria para envia o nome da "cidade" , que seria capturado em um formulário hidden na página index e enviado junto com a pesquisa para página pesquisa.php para fazer o filtro no SELECT ?
★★★★★DIA 11.07.19 10h05RESPONDER
Marcos Martins, João Rafael
Enviando Comentário Fechar :/
gabriel moraes

gabriel moraes

Ola amigo!, é muito bom seus ensinamentos como sempre!
gostaria de saber, como eu faria para acrescentar um botão logo apos tabela de e-mail. com algum tipo de opçao como por exemplo ver telefone?
★★★★★DIA 11.10.18 02h17RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Ola Gabriel, que bom que gostou, para realizar esse procedimento é simples, basta adicionar mais uma TD na tabela e dentro dela seu botão, veja abaixo algo que possa te ajudar:


 


<td><span class="btn btn-default fa fa-envelop">Telefone</td>

★★★★★DIA 11.10.18 08h33RESPONDER
N/A
Enviando Comentário Fechar :/
Emerson Ribeiro

Emerson Ribeiro

Caros amigos, preciso adaptar este código para uma especie de consulta preço, por isso quero exibir apenas o resultado consultado e quando nâo houver consulta não exibir nenhum resultado, quero também que o cursor fique sempre no campo pesquisa, pois usarei um leitor de código de barras que fará a inserção dos códigos de forma automática. Tem como vocês me ajudarem. Obrigado
★★★★★DIA 28.06.18 15h19RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
israel ruiz

israel ruiz

Parabéns muito bom mesmo, recentemente conheci o DataTable que possui diversas funcionalidades prontas, entre elas a possibilidade de realizar pesquisas em em multiplicas colunas, ou seja, tenho lá uma tabela - HTML que apresenta todos os registros, e um campo de pesquisa, supondo que eu tenha nome, email, endereço se eu digitar "jose" ele pesquisa nas 3 colunas, você sabe como posso fazer o mesmo utilizando o a codificação php+ajax ? Pois apesar do bom funcionamento do DataTable tenho situações onde eu desejo o controle da pesquisa. Desde já agradeço qualquer ajuda.
★★★★★DIA 08.05.18 09h43RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
Elvis Roberto da Silva

Elvis Roberto da Silva

É possivel fazer esta mesma consulta em uma tabela responsiva bootstrap?
★★★★★DIA 18.07.17 22h34RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Araujo

Leonardo Araujo

Adorei a explicação e ficou bem claro!! Obrigadoo!!!
Sabe me informar onde posso encontrar um ótimo material sobre AJAX? E se puder me enviar vou agradecer demais. sleonardo.araujo95@gmail.com
Agradeço desde já.
★★★★★DIA 26.12.16 11h54RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
ff ggg

ff ggg

Mas como seria esse event mas ou menos tem exemplos???
★★★★★DIA 11.04.17 17h57RESPONDER
N/A
Enviando Comentário Fechar :/
Walter

Walter

muito bom o seu artigo, mas teria como fazer a paginação ?
★☆☆☆☆DIA 17.04.16 22h04RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Obrigado Walter, Tem como sim, basta vc montar a estrutura e trazer tudo pelo Ajax jogando em sua página! Tendo um conhecimento básico na manipulação do JS, vc consegue montar qualquer coisa!



Qualquer dúvida estamos dispostos a ajudá-lo e bons estudos!
★★★★★DIA 22.04.16 14h36RESPONDER
N/A
Enviando Comentário Fechar :/
Marcos

Marcos

Muito bom o seu tutorial. Tenho uma dúvida, como faço para só mostrar o resultado quando eu começar a digitar? Já que, ao iniciar a página ele carrega todos os registros.
★☆☆☆☆DIA 13.02.16 16h02RESPONDER
N/A
Enviando Comentário Fechar :/
Jefferson michel

Jefferson michel

Cara, ajudou muito porém não estou conseguindo adaptar para minha necessidade.
Preciso que não mostre o dados da tabela logo de cara, preciso que mostre o dado pesquisado somente quando usuario apertar o ENTER. Me ajuda PF
★☆☆☆☆DIA 30.12.15 02h12RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Olá Jefferson michel que bom que gostou, então para fazer como vc quer, basta dentro da função keyup um IF assim if(event.keyCode == 13){} e dentro desse IF as instruções, assim quando vc apertar o ENTER a função será ativada! Qualquer dúvida comente por favor, abraço !
★☆☆☆☆DIA 05.01.16 09h01RESPONDER
N/A
Enviando Comentário Fechar :/
Ernesto

Ernesto

Nosssssaaaaaa!!!!!!!!!!! Carrra ajudou me muito tava a precisar memo de um conteudo igual ao este, abracos
★☆☆☆☆DIA 20.12.15 22h12RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Bom dia, obrigado pelo seu comentário.

Sobre sua dúvida é o seguinte a variável $uid você cria ela dentro for que ira verificar todas as mensagens em imap_num_msg, certo ? Ai essa variável é criada e ela representa o ID da mensagem na sua caixa de email, ou seja, você vai conseguir marcar como lido seu email através desse ID, e você obtém ele dessa maneira ---> $uid = imap_uid($mbox,$m); assim você além de controlar qual mensagem está manipulando na hora do evento, você também pode guarda-la em seu BD por algum motivo que venha utilizar, ou somente para registro ! Espero que tenha ficado claro, qualquer dúvida pergunte e tentaremos lhe ajudar!
★★★★★DIA 19.08.16 10h36RESPONDER
N/A
Enviando Comentário Fechar :/
André

André

Nossa, muito bom...me ajudou muito, porém preciso de ajuda. Como faço para colocar paginação no resultado?
★☆☆☆☆DIA 20.11.15 11h11RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Boa tarde André, obrigado por ter gostado, em relação a paginação, tem plugins prontos somente para vc implementar, de uma pesquisada a respeito.
★☆☆☆☆DIA 24.11.15 13h11RESPONDER
N/A
Enviando Comentário Fechar :/
Jhony

Jhony

Man, Excelente ! parabens cara ! "SUCESSOFUL" !
★☆☆☆☆DIA 30.10.15 15h10RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Muito obrigado Jhony, sua opinião é muito importante. Bons estudos....
★☆☆☆☆DIA 04.11.15 13h11RESPONDER
N/A
Enviando Comentário Fechar :/
Henrique F Santos

Henrique F Santos

Como eu faço para exibir o resultado só quando digitar? Porque com o campo vazio ele retorna todos.
★☆☆☆☆DIA 24.09.15 15h09RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Então para exibir o resultado somente quando for digitar o texto, coloque a chamada da função dentro de um evento keypress, keyup ou keydown, se for isso que eu entendi deve resolver...
★☆☆☆☆DIA 01.10.15 16h10RESPONDER
N/A
Enviando Comentário Fechar :/
Saulo

Saulo

Perfeito amigo, estava procurando por algo desse tipo e seu tutorial funcionou certinho... Obrigado
★☆☆☆☆DIA 22.04.15 17h04RESPONDER
N/A
Enviando Comentário Fechar :/
mariana

mariana

ajudou muito,vlw
★☆☆☆☆DIA 07.04.15 19h04RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: PHP

Soluções

...CURTIU? AINDA NÃO VIU NOSSO PORTFÓLIO?


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.

Usamos cookies para manter o site seguro, registrar e personalizar sua navegação. Para mais detalhes sobre essa atividade, acesse nossa Politica de Privacidade

Entendi