Neste pequeno tutorial iremos construir uma busca por cada dígito do teclado, com PHP, MYSql e uma pequena ajudinha 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.

1: Para começar, crie um arquivo chamado “busca.php” e coloque o seguinte formulário e div.

busca.php

<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.

2: 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 javascript, 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.

3: Crie agora um arquivo com o nome de “ajax.js”, inclua esse trecho de código e depois importe esse arquivo em nossa página de busca.

ajax.js

function AJAX() {

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;
}

Pronto já 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.

04: Crie outro arquivo com o nome “listar.php” e coloque esse código.

$con = mysql_connect("localhost","root","");
mysql_select_db("test",$con);

$rs = mysql_query($sql,$con);
while($linha = mysql_fetch_array($rs)) {
print urlencode($linha['nome']."
");
}
mysql_close($con);
?>

Neste mesmo 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, basta agora você testar. E se quiser pode personalizar esse SCRIPT, ou até mesmo usar em seu site!