Live Search usando AJAX, PHP e MYSQL ~ Café com Bits

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>



<form name="busca">
<fieldset>

<legend>Buscar frases</legend>



<input type="text" size="89" maxlength="255" name="texto" onkeyup="Buscar();" />
</fieldset>

</form>
<br />
<br />


<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

Café com Bits

sábado, outubro 11, 2008