Adicionar a Meu favorito

Wednesday, 31 de January de 2007

Neste artigo iremos construir uma busca por cada dígito do teclado, com o auxílio do AJAX.
Temos uma página que terá o formulário para a busca e outra que irá receber o dígito e realizar a busca listando os dados encontrados.

Passo 01: Crie o arquivo busca.php e coloque o seguinte formulário e div.

busca.php

A ação onKeyUp irá acessar a função que busca os dados pela palavra que estiver no input, o conteúdo trago irá ficar no lugar do div abaixo.

Passo 02: Abra a tag script ainda na página busca.php e insira esse trecho de código dentro que é a nossa função javascript que irá trazer os dados.

function recuperardados() { var nome = document.form.nome.value; var ajax = new AJAX(); ajax.Updater("listar.php?digito="+nome,"conteudo","get","carregando os dados..."); }

Na função, recuperamos o valor do input, instanciamos o objeto AJAX e chamamos o método Update passando como parâmetro a página PHP que fará a busca, o nome da objeto html onde o resultado será exibido, o método da busca e a mensagem enquanto os dados são trazidos.

Passo 03: Crie o arquivo ajax.js, inclua esse trecho de código e depois importe esse arquivo em nossa página de busca.

ajax.js

function AJAX() { this.Updater=carregarDados; function carregarDados(caminhoRetorno,idResposta,metodo,mensagem) { var conteudo=document.getElementById(idResposta) conteudo.innerHTML= mensagem; var xmlhttp = getXmlHttp(); //Abre a url xmlhttp.open(metodo.toUpperCase(), caminhoRetorno,true); //Executada quando o navegador obtiver o código xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4){ //Lê o texto var texto=xmlhttp.responseText; //Desfaz o urlencode texto=texto.replace(/+/g," "); texto=unescape(texto); //Exibe o texto no div conteúdo var conteudo=document.getElementById(idResposta); conteudo.innerHTML=texto; } } xmlhttp.send(null); } } function getXmlHttp() { var xmlhttp; try{ xmlhttp = new XMLHttpRequest(); }catch(ee){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; } } } return xmlhttp; }

Temos a função carregarDados que recebe os parâmetros passados na página de busca e traz os dados da nossa página que realiza a listagem.

Passo 04: Crie o arquivo listar.php e coloque o seguinte trecho de código.

".$_GET['digito'].""); $sql = "select * from cliente where nome like '%".$_GET['digito']."%'"; $rs = mysql_query($sql,$con); while($linha = mysql_fetch_array($rs)) { print urlencode($linha['nome'].""); } mysql_close($con); ?>

Neste arquivo, nós construimos a query que fará a busca pelo parâmetro que nós recebemos da página de busca.

USE test; CREATE TABLE cliente ( id int not null auto_increment, nome varchar(120) not null, primary key(id) ); INSERT INTO cliente(nome) values ("Rogerio"); INSERT INTO cliente(nome) values ("Fabio"); INSERT INTO cliente(nome) values ("Roberto"); INSERT INTO cliente(nome) values ("Adriano"); INSERT INTO cliente(nome) values ("Lucas"); INSERT INTO cliente(nome) values ("Ana"); INSERT INTO cliente(nome) values ("Ana Paula");

Pronto! Agora é só testar.

Até a próxima.

Outros artigos

Assine o Feed desta categoria

• Sistema de upload de imagens - 31/01/2007
• Login utilizando Cookies - 07/01/2007
• Simples Sistema de Login sem banco de dados! - 18/09/2006
• Executando comandos em um banco de dados PostgreSQL - 14/09/2006
• Ver mais...

Comentários do artigo [Novo comentário]