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");