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.
<form name="form" action="" onSubmit="return false">
<input name="nome" value="" onKeyUp="recuperardados()">
</form>
<div id="conteudo">
</div>
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 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.
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.
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");
