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() {
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;
}
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);
print urlencode("palavra ".$_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 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!
Parabens sua dica e exelente ajudou muito