Um recurso muito legal e útil usado em páginas da web 2.0, é o chamado “live search”. O live search consiste em uma caixa de pesquisa cujos resultados são exibidos em tempo real sem precisar recarregar toda a página. O exemplo é bem simples e pode ser visto em http://solleon.hostdegraca.com/cafecombits/livesearch/, onde basta digitarmos três letras e o resultado da pesquisa já é exibido logo a baixo.
Vamos agora demonstrar passo a passo como fazer uma busca do tipo “live search” para suas aplicações online.
Passo I – Fazendo um banco de dados para o exemplo
Para o exemplo vamos criar um banco de dados em MYSQL bem simples, contendo somente uma tabela, como monstrado a seguir:
O script de criação do BD é:
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Banco de Dados: `exemplo`
--
-- --------------------------------------------------------
--
-- Estrutura da tabela `Frases`
--
CREATE TABLE IF NOT EXISTS `Frases` (
`CodFrase` int(11) NOT NULL auto_increment,
`frase` varchar(255) NOT NULL,
`autor` varchar(50) NOT NULL default 'Desconhecido',
PRIMARY KEY (`CodFrase`),
KEY `frase` (`frase`,`autor`),
FULLTEXT KEY `frase_2` (`frase`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COMMENT='Frases interessantes' AUTO_INCREMENT=49 ;
Se preferir baixar este script, clique aqui.
Para excecutar o script de criação, podemos abrir o prompt de comando e simplesmente digitar:
shell> mysql < arquivo_texto
Também podemos abrir o client mysql e digirtar:
mysql> source filename
O client fará tudo de forma automatizada e teremos nosso banco de dados criado.
Cadastre algumas frases no banco de dados para poder vizualisar o exemplo mais tarde.
Passo II – Criação da página HTML para pesquisa e exibição dos dados
Nossa página em HTML será bem simples, terá apenas uma caixa de busca no topo, onde o usuário irá digitar uma palavra, e as frases que a contiverem serão exibidas logo abaixo.
Seu código HTML deve conter um form e uma div que daremos o nome de “resultado” para exibição dos resultados da consulta. O form deve ter um controle input, onde o evento onhotkey deve chamar uma função que fará a consulta.
Código HTML da página “index.html” do exemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo de Live Search</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif; font-size: 0.7em;
color:#000;
margin:0;
padding:0;
}
#page {
width:720px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:0;
padding:0;
}
#content {
width:85%;
margin-left:auto;
margin-right:auto;
padding:0;
padding-top:30px;
padding-left:5px;
padding-right:5px;
text-align:justify;
}
#resultado
{
background: #F5F5F5;
padding:15px;
border:#999 3px dashed;
}
.titulo {
font-size: 1.5em;
font-weight: bold;
text-align:center;
}
.subtitulo {
font-size: 1.3em;
font-weight: bold;
text-align:center;
}
label, input {
display: block;
}
fieldset {
border: dashed 3px #999;
background:#F5F5F5;
padding:15px;
}
-->
</style>
<script src="ajax.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<div id="page">
<div id="content">
<span class="titulo">
Exemplo de Live Search usando AJAX, MYSQL E PHP
<br /><br />
</span>
<!-- este é o form de pesquisa, repare que não tem action e nem um controle submit-->
<form name="busca">
<fieldset>
<legend>Buscar frases</legend>
<!-- esta eh a caisa de pesquisa, repare no onkeyup chamando a funcao Buscar que fara a pesquisa-->
<input type="text" size="89" maxlength="255" name="texto" onkeyup="Buscar();" />
</fieldset>
</form>
<br />
<br />
<!-- essa div conterá o resultado da busca-->
<div id="resultado"><span class='subtitulo'>Digite uma palavra com mais de 2 (duas) letras. Por exemplo, <i>vida</i></span></div>
</div>
</body>
</html>
Este código HTML pode ser baixando na íntegra clicando aqui.
Salve o arquivo como “index.html” no seu servidor WEB.
Passo III – Criando o javascript da página “index.html”
O javascript da página, conterá funções que interpretam e tratam a entrada do usuário, que criam o xml request e lê o xml com o resultado da busca gerado dinamicamente e, por fim, formataram o resultado para o html adicionando a página.
Por razões óbvias, chamaremos esse arquivo de javascript de “ajax.js”, segue o código fonte do mesmo:
// JavaScript Document
var http_request = false;
//funcao que realiza a busca
function Buscar()
{
//pegando o valor do controle no form na pagina
var text = document.busca.texto.value;
//se o comprimento do texto for maior que dois
if (text.length >2)
{
//definindo pagina que fara a consulta e retornará o xml
var url = "buscar.php";
url += "?q="+text;
//gerando uma imagem do tipo carregando para que o usuario saiba que esta sendo feita uma busca no banco de dados
document.getElementById("resultado").innerHTML = "<div align='center' class='subtitulo'><img src='ajax-loader.gif' alt='Carregando...' /><br /><br />Carregando...</div>";
//chamando funcao que verifica se a busca pode ser feita
AtualizaResultado(url);
}
else
{
document.getElementById("resultado").innerHTML = "<span class='subtitulo'>Digite uma palavra com mais de 2 (duas) letras. Por exemplo, <i>vida</i></span>";
}
}
//coracao do ajax, cria o objeto xmlhttprequest e tenta lelo
function AtualizaResultado(url)
{
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Não foi possível criar uma instância XMLHTTP');
return false;
}
http_request.onreadystatechange = mudancaDeEstado; // essa funcao eh chamada quando o xml eh carregado
http_request.open('GET', url, true);
http_request.send(null);
}
//funcao que controi o resultado da busca
function mudancaDeEstado()
{
var retorno = "";
//definindo o xml
var xmldoc = http_request.responseXML;
//navegando para a tag item
var lst = xmldoc.getElementsByTagName('item');
var total = 0;
//criando a tabela para exibicao dos dados
retorno = "<table width='100%' border='0' cellpadding='2' cellspacing='2'>";
//percorrendo todos os itens
for (var i=0;i<lst.length;i++)
{
var frase = "";
var autor = "";
total = total +1;
var objNode = lst[i];
if (objNode.nodeType == 1)
{
for (var j=0;j<objNode.childNodes.length;j++)
{
var objNI = objNode.childNodes[j];
if (objNI.nodeType == 1)
{
switch (objNI.nodeName)
{
case "frase":
frase = objNI.firstChild.nodeValue;
break;
case "autor":
autor = objNI.firstChild.nodeValue;
break;
}
}
}
}
//criando row na tabela que conterá a frase e o autor
retorno += "<tr><td><i>""+frase+""</i> <strong>"+autor+"</strong></td></tr>";
}
if (total > 0)
{
retorno += "<tr><td><strong>"+total+" frase(s) listada(s)</strong></td></tr></table>";
}
else // no caso de não ter encontrado nenuma frase
{
retorno = "<span class='subtitulo'>Nenhuma frase encontrada com esta palavra</span>"
}
//escrevendo o resultado no documento
document.getElementById("resultado").innerHTML = retorno;
}
Para baixar o arquivo já pronto, clique aqui.
Você deve salvar este arquivo como “ajax.js” no mesmo diretório onde salvou o “index.html”, no seu servidor WEB.
Passo IV – Criando a página PHP que realizará a consulta no BD
Agora iremos confeccionar a página PHP que fará a consulta no banco de dados e formatará o resultado em um arquivo xml para ser usado pelo javascript. O nome do arquivo do exemplo será “search.php”.
Código fonte, lembre-se de alterar os dados da conexão ao banco de dados:
<?php
//capturando variaveis
$buscar = $_GET["q"];
//abrindo conexao com o bancode dados
$link = mysql_connect("hostmysqlqualquer", "usuario", "senha");
if (!$link)
{
echo 'Não foi possível selecionar o banco de dados';
die('Não foi possível conectar: ' . mysql_error());
}
if (!mysql_select_db('exemplo', $link))
{
echo 'Não foi possível selecionar o banco de dados';
exit;
}
//criando a consulta
$sql = "SELECT * FROM Frases";
if (isset($buscar) && $buscar != '')
{
$sql .= " WHERE frase LIKE '%".$buscar."%'";
$sql .= " ORDER BY frase";
}
//executando a consulta
$result = mysql_query($sql, $link);
if (!$result)
{
echo "Erro do banco de dados, não foi possível consultar o banco de dados\n";
echo 'Erro MySQL: ' . mysql_error();
exit;
}
//montando o xml de saida
echo '<?xml version="1.0" encoding="iso-8859-1"?>'."\n";
echo "<frases>\n";
while ($row = mysql_fetch_assoc($result))
{
echo "\t<item>\n";
echo "\t\t".'<frase>'.$row['frase'].'</frase>'."\n";
echo "\t\t".'<autor>'.$row['autor'].'</autor>'."\n";
echo "\t</item>\n";
}
mysql_close($link);
echo '</frases>';
?>
Se preferir baixá-lo, clique aqui.
Salve no mesmo diretório onde estão os outros arquivos, com o nome de “search.php”, no seu servidor WEB, coloque também a figura que será exibida quando a consulta estiver sendo executada no mesmo diretório, para baixá-la clique aqui.
Pronto! Agora é só acessar “index.html” do seu browser e testar se o exemplo está funcionando bem no seu servidor WEB. Não se esqueça de inserir alguns registros no banco de dados para poder testar a pesquisa! Valeu e até a próxima pessoal!
Por Solleon Menezes
