Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Busca dinâmica com Ajax

04-02-2009 11:44

O objetivo desse script é ter uma busca dinâmica, usando Ajax, ao mesmo tempo dando a busca uma opção de buscar itens do banco de dados por letra, o que vai trazer muito dinâmismo a busca já que o resultado é mostrado via Ajax.

A navegação é similar a navegação via checkbox do site abaixo
http://www.hotel-florianopolis.com.br/

Qualquer dúvida sobre o script só postar na seção MySQL do fórum.

BASE DE DADOS * Tabela dados

CREATE TABLE IF NOT EXISTS `dados` ( `letra` varchar(20) NOT NULL, `email` varchar(50) NOT NULL ) TYPE=MyISAM; INSERT INTO `dados` (`letra`, `email`) VALUES ('a', 'abacate@hotmail.com'), ('b', 'banana@hotmail.com'), ('c', 'caju@hotmail.com'), ('b', 'brocolis@hotmail.com');

teste.php * arquivo onde tem a base da estrutura

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <html> <head> <script type="text/javascript"> try{ xmlhttp = new XMLHttpRequest(); } catch(ee){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(E){ xmlhttp = false; } } } function abre(arquivo,metodo){ xmlhttp.open(metodo,arquivo); xmlhttp.onreadystatechange=conteudo xmlhttp.send(null) } function conteudo() { document.getElementById('conteudo').innerHTML="carregando..."; if (xmlhttp.readyState==4){ document.getElementById('conteudo').innerHTML=xmlhttp.responseText } } </script> </head> <body ONLOAD="abre('teste2.php', 'GET');return setTimeout('mudanca()', 300);"> <script> var passado = ""; function mostra() { for(i = 0; i < document.forms['check'].length; i++) { if(document.forms['check'].elements[i].checked==true) { passado+= document.forms['check'].elements[i].value+"|"; } } abre('teste2.php?valor_passado='+passado, 'GET'); passado=""; return false; } function mudanca() { document.getElementById("paginacao_acima").innerHTML = document.getElementById("paginacao").innerHTML; } </script> <TABLE BORDER=1 WIDTH="100%"> <TR> <TD><form name="check"> <input type="checkbox" name="valores" value="a" onclick="mostra();return setTimeout('mudanca()', 300);">começa com a <br> <input type="checkbox" name="valores" value="b" onclick="mostra();return setTimeout('mudanca()', 300);">começa com b </form></TD> <TD> <div id="conteudo"> </div> </TD> </TR> </TABLE> </body> </html>

teste2.php * arquivo onde estão as configurações e resultados a serem mostrados

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <html> <head> </head> <body> <div id="conteudo"> <?php function getmicrotime(){ list($sec, $usec) = explode(" ",microtime()); return ($sec + $usec); } $time_start = getmicrotime(); // nome deste documento ( ex.: busca.php ) usado no link da paginação /* Obs: caso tenha que passar parâmetros pelo link ( busca.php?valor=... ) basta adicionar ao documento abaixo ( busca.php?valor=...&outrovalor=... vá também em duas linhas abaixo definidas como COMPLEMENTO e defina-os Ex.: WHERE campotal='' AND campo='', etc... */ $arquivo = "teste2.php"; $endereco = "localhost"; // servidor $banco = "teste"; // nome do db $usuario = "teste"; // usuário $password = "teste"; // senha $table = "dados"; // tabela usada $maxpag = 2; // máximo de seu resultado por página // máximo de links mostrado por página // valor dobrado a partir do valor $maxpag $maxlnk = 5; if ($_GET['id'] == ''){ $param = 0; } else { $temp = $_GET['id']; $passo1 = $temp - 1; $passo2 = $passo1*$maxpag; $param = $passo2;} $res = mysql_connect("$endereco", "$usuario", "$password"); $valor = $_GET['valor_passado']; $separa = explode("|", $valor); if(empty($_GET['quantos'])) { $quantos = count($separa); } else { $quantos = $_GET['quantos']; } $complemento = ""; switch($quantos) { case "1" : $complemento.= ""; break; case "2" : $complemento.= " WHERE letra='".$separa[0]."'"; break; case "3" : $complemento.= " WHERE letra='".$separa[0]."' || letra='".$separa[1]."'"; break; } $sql = "select email from $table $complemento ORDER BY email ASC"; // COMPLEMENTO $sql_01 = "select email from $table $complemento ORDER BY email ASC limit $param,$maxpag"; // COMPLEMENTO $res1 = mysql_db_query("$banco", "$sql", $res); $res2 = mysql_db_query("$banco", "$sql_01", $res); $totreg = mysql_num_rows($res1); $totreg_01 = mysql_num_rows($res2); $results_tot = $totreg; $results_parc = $totreg_01; $result_div = $results_tot/$maxpag; $n_inteiro = (int)$result_div; if ($n_inteiro < $result_div) {$n_paginas = $n_inteiro + 1;} else {$n_paginas = $result_div;} $pg_atual = $param/$maxpag+1; $reg_inicial = $param + 1; $pg_anterior = $pg_atual - 1; $pg_proxima = $pg_atual + 1; $time_end = getmicrotime(); $time = $time_end - $time_start; ?> <table width="100%"> <tr> <td align=right>Foram encontradas <b><?echo $totreg;?></b> ocorrência(s) em <b><?echo $n_paginas?></b> página(s) de resultado(s) - visualizando <b><?echo $maxpag;?></b> resultado(s) por página.</font></td> </tr> </table> <br> <center><div id="paginacao_acima"></div></center> <table width="100%"> <tr><td> <?php while($resultado = mysql_fetch_array($res2)) { $contador ++; extract($resultado); $i++; if($i % 2 == 0 ? $cor="cccccc" : $cor="f9f9f9"); echo "<div style='background-color:#$cor'>$email</div>"; } $reg_final = $param + $contador; ?> </td></tr> </table> <center><div id="paginacao"><table> <tr> <td align=right> <?php if ($_GET['id'] > 1) { echo "<a href=\"#\" onclick=\"abre('$arquivo?id=$pg_anterior&quantos=$quantos&valor_passado=$valor','GET','conteudo');return setTimeout('mudanca()', 300);\">anterior(es)"; } echo "</a></td>"; if ($temp >= $maxlnk){ if ($n_paginas > $maxlnk) {$n_maxlnk = $temp + 4; $maxlnk = $n_maxlnk; $n_start = $temp - 6; $lnk_impressos = $n_start;}} while(($lnk_impressos < $n_paginas) and ($lnk_impressos < $maxlnk)) { $lnk_impressos ++; echo "<td>"; if($pg_atual != $lnk_impressos) { echo "<a href=\"#\" onclick=\"abre('$arquivo?id=$lnk_impressos&quantos=$quantos&valor_passado=$valor', 'GET','conteudo');return setTimeout('mudanca()', 300);\">"; } if ($pg_atual == $lnk_impressos){echo "<b>$lnk_impressos<b>"; } else { echo "$lnk_impressos"; } echo "</a></font></td>"; } echo "<td>"; if ($reg_final < $results_tot) { echo "<a href=\"#\" onclick=\"abre('$arquivo?id=$pg_proxima&quantos=$quantos&valor_passado=$valor', 'GET','conteudo');return setTimeout('mudanca()', 300);\">próximo(s)</a></td>"; } ?> </tr> </table></div> </center> <table width="100%"> <tr> <td align=center>mostrando de <b><?echo $reg_inicial;?></b> - <b><?php echo $reg_final; ?></b> resultado(s) por página. - total de <b><?echo $totreg;?></b> no banco de dados. <br> <?php $texto=printf ("a pesquisa demorou <b>%.3f</b> segundos",$time);?></td> </tr> </table> </div> </body> </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Busca dinâmica com Ajax

11-02-2009 12:57

Blz, ótima dica, mas no caso de colocar a paginação também na parte superior , podendo obter a informação da paginação no topo da pagina e a outra no fim da página?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Busca dinâmica com Ajax

11-02-2009 14:19

Isso é um tanto complicado, porque alguns valores da paginação são gerados no while, ou seja, fora do topo da paginação.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Busca dinâmica com Ajax

11-02-2009 23:14

Ok , nesse caso qual a alternativa ou qual script de paginação se adaptaria a esse modelo de script? para que se possa obter a informação no topo e no fim da página. Agradeço
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Busca dinâmica com Ajax

12-02-2009 10:48

Achando uma solução posto aqui.
0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Busca dinâmica com Ajax

13-02-2009 19:19

Achei uma solução que foi a seguinte, repetir o conteúdo, ou seja, os links da paginação, em uma div logo acima.

O arquivo pode ser melhorado, separar os scripts em um js, usar uns includes, etc...

Então, fiz assim:

teste.php ( esse arquivo é a base )

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <html> <head> <script type="text/javascript"> try{ xmlhttp = new XMLHttpRequest(); } catch(ee){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(E){ xmlhttp = false; } } } function abre(arquivo,metodo){ xmlhttp.open(metodo,arquivo); xmlhttp.onreadystatechange=conteudo xmlhttp.send(null) } function conteudo() { document.getElementById('conteudo').innerHTML="carregando..."; if (xmlhttp.readyState==4){ document.getElementById('conteudo').innerHTML=xmlhttp.responseText } } </script> <script type="text/javascript"> function mudanca() { document.getElementById('paginacao_acima').innerHTML=document.getElementById('paginacao').innerHTML; return true; } </script> </head> <body onload="abre('teste2.php', 'GET');return setTimeout('mudanca()', 300);"> <script> var passado = ""; function mostra() { for(i = 0; i < document.forms['check'].length; i++) { if(document.forms['check'].elements[i].checked==true) { passado+= document.forms['check'].elements[i].value+"|"; } } abre('teste2.php?valor_passado='+passado, 'GET'); passado=""; return false; } </script> <TABLE BORDER=1 WIDTH="100%"> <TR> <TD><form name="check"> <input type="checkbox" name="valores" value="a" onclick="mostra()">começa com a <br> <input type="checkbox" name="valores" value="b" onclick="mostra()">começa com b </form></TD> <TD><div id="conteudo"></div></TD> </TR> </TABLE> </body> </html>

teste2.php ( esse arquivo é a estrutura da consulta )

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <html> <head> </head> <body> <div id="conteudo"> <?php function getmicrotime(){ list($sec, $usec) = explode(" ",microtime()); return ($sec + $usec); } $time_start = getmicrotime(); // nome deste documento ( ex.: busca.php ) usado no link da paginação /* Obs: caso tenha que passar parâmetros pelo link ( busca.php?valor=... ) basta adicionar ao documento abaixo ( busca.php?valor=...&outrovalor=... vá também em duas linhas abaixo definidas como COMPLEMENTO e defina-os Ex.: WHERE campotal='' AND campo='', etc... */ $arquivo = "teste2.php"; $endereco = "localhost"; // servidor $banco = "teste"; // nome do db $usuario = "teste"; // usuário $password = "teste"; // senha $table = "dados"; // tabela usada $maxpag = 2; // máximo de seu resultado por página // máximo de links mostrado por página // valor dobrado a partir do valor $maxpag $maxlnk = 5; if ($_GET['id'] == ''){ $param = 0; } else { $temp = $_GET['id']; $passo1 = $temp - 1; $passo2 = $passo1*$maxpag; $param = $passo2;} $res = mysql_connect("$endereco", "$usuario", "$password"); $valor = $_GET['valor_passado']; $separa = explode("|", $valor); if(empty($_GET['quantos'])) { $quantos = count($separa); } else { $quantos = $_GET['quantos']; } $complemento = ""; switch($quantos) { case "1" : $complemento.= ""; break; case "2" : $complemento.= " WHERE letra='".$separa[0]."'"; break; case "3" : $complemento.= " WHERE letra='".$separa[0]."' || letra='".$separa[1]."'"; break; } $sql = "select email from $table $complemento ORDER BY email ASC"; // COMPLEMENTO $sql_01 = "select email from $table $complemento ORDER BY email ASC limit $param,$maxpag"; // COMPLEMENTO $res1 = mysql_db_query("$banco", "$sql", $res); $res2 = mysql_db_query("$banco", "$sql_01", $res); $totreg = mysql_num_rows($res1); $totreg_01 = mysql_num_rows($res2); $results_tot = $totreg; $results_parc = $totreg_01; $result_div = $results_tot/$maxpag; $n_inteiro = (int)$result_div; if ($n_inteiro < $result_div) {$n_paginas = $n_inteiro + 1;} else {$n_paginas = $result_div;} $pg_atual = $param/$maxpag+1; $reg_inicial = $param + 1; $pg_anterior = $pg_atual - 1; $pg_proxima = $pg_atual + 1; $time_end = getmicrotime(); $time = $time_end - $time_start; ?> <table width="100%"> <tr> <td align=right>Foram encontradas <b><?echo $totreg;?></b> ocorrência(s) em <b><?echo $n_paginas?></b> página(s) de resultado(s) - visualizando <b><?echo $maxpag;?></b> resultado(s) por página.</font></td> </tr> </table> <br> <center><div id="paginacao_acima"></div></center> <table width="100%"> <tr><td> <?php while($resultado = mysql_fetch_array($res2)) { $contador ++; extract($resultado); $i++; if($i % 2 == 0 ? $cor="cccccc" : $cor="f9f9f9"); echo "<div style='background-color:#$cor'>$email</div>"; } $reg_final = $param + $contador; ?> </td></tr> </table> <center><div id="paginacao"><table> <tr> <td align=right> <?php if ($id > 1) { echo "<a href=\"#\" onclick=\"abre('$arquivo?id=$pg_anterior&quantos=$quantos&valor_passado=$valor','GET','conteudo');return setTimeout('mudanca()', 300);\">anterior(es)"; } echo "</a></td>"; if ($temp >= $maxlnk){ if ($n_paginas > $maxlnk) {$n_maxlnk = $temp + 4; $maxlnk = $n_maxlnk; $n_start = $temp - 6; $lnk_impressos = $n_start;}} while(($lnk_impressos < $n_paginas) and ($lnk_impressos < $maxlnk)) { $lnk_impressos ++; echo "<td>"; if($pg_atual != $lnk_impressos) { echo "<a href=\"#\" onclick=\"abre('$arquivo?id=$lnk_impressos&quantos=$quantos&valor_passado=$valor', 'GET','conteudo');return setTimeout('mudanca()', 300);\">"; } if ($pg_atual == $lnk_impressos){echo "<b>$lnk_impressos<b>"; } else { echo "$lnk_impressos"; } echo "</a></font></td>"; } echo "<td>"; if ($reg_final < $results_tot) { echo "<a href=\"#\" onclick=\"abre('$arquivo?id=$pg_proxima&quantos=$quantos&valor_passado=$valor', 'GET','conteudo');return setTimeout('mudanca()', 300);\">próximo(s)</a></td>"; } ?> </tr> </table></div> </center> <table width="100%"> <tr> <td align=center>mostrando de <b><?echo $reg_inicial;?></b> - <b><?php echo $reg_final; ?></b> resultado(s) por página. - total de <b><?echo $totreg;?></b> no banco de dados. <br> <?php $texto=printf ("a pesquisa demorou <b>%.3f</b> segundos",$time);?></td> </tr> </table> </div> </body> </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Busca dinâmica com Ajax

19-02-2009 12:58

Ok, está funcionando ok!, com uma ressalva: Ao entrar na page aparece a paginação no topo e na parte inferior , mas ao selecionar no chekbox, aparecera só na parte inferior, só aparecera na parte superior com o reload da página com o box já setado, no caso de desativar o chekbox, aparecera a paginação só na parte inferior da pagina.
Obrigado pela atenção.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Busca dinâmica com Ajax

19-02-2009 16:02

Bem lembrado, tem que adicionar essa linha no onclick do checkbox
return setTimeout('mudanca()', 300);
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Mensagens: 19
Sexo: Masculino
Localização: Santa Catarina/Florianópolis/Brasil
Contato:

Busca dinâmica com Ajax

19-02-2009 20:57

Tentei colocar na linha do checkbox , mas acho que não coloquei exatamente onde deveria estar.Sugiro para evitar maiores explicações que a alteração seja feita nao teste.php, assim o script fica correto.Obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Busca dinâmica com Ajax

19-02-2009 21:21

Já está feito, no primeiro post.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 96
Nome: Júnior
Descrição do site: Voltado para o Desenvolvimentos de Sistemas
Localização: Goiania
Contato:

Busca dinâmica com Ajax

20-02-2009 16:07

muito bom este post vai sauvar muita cabeça do pessoal quando estiver procurando algo parecido... como sempre o web ajudando para caramba
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Busca dinâmica com Ajax

20-02-2009 16:09

:-)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado