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.

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>

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.

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

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