PHP

Em por

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 !!!

Veja Também:

Artigos Relacionados a categoria: PHP

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

Já temos 17 comentário(s). DEIXE O SEU :)
mariana

mariana

ajudou muito,vlw
★☆☆☆☆ DIA 07.04.15 19h04 RESPONDER
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 17h04 RESPONDER
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 15h09 RESPONDER
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 16h10 RESPONDER
N/A
Enviando Comentário Fechar :/
Jhony

Jhony

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

Leonardo Martins

Muito obrigado Jhony, sua opinião é muito importante. Bons estudos....
★☆☆☆☆ DIA 04.11.15 13h11 RESPONDER
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 11h11 RESPONDER
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 13h11 RESPONDER
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 22h12 RESPONDER
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 02h12 RESPONDER
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 09h01 RESPONDER
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 16h02 RESPONDER
N/A
Enviando Comentário Fechar :/
Walter

Walter

muito bom o seu artigo, mas teria como fazer a paginação ?
★☆☆☆☆ DIA 17.04.16 22h04 RESPONDER
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 14h36 RESPONDER
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 11h54 RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
ff ggg

ff ggg

Mas como seria esse event mas ou menos tem exemplos???
★★★★★ DIA 11.04.17 17h57 RESPONDER
N/A
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 22h34 RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

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

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora