Live Search AJAX PHP

O AJAX pode fornecer uma experiência de pesquisa mais amigável e interativa para os usuários.

Busca Live Search AJAX

Neste exemplo de AJAX, vamos demonstrar uma busca em tempo real.

A busca em tempo real tem muitas vantagens em comparação com a busca tradicional:

  • Os resultados correspondentes são exibidos enquanto você digita os dados
  • Os resultados são filtrados à medida que você continua a digitar os dados
  • Se os resultados forem poucos, remova caracteres para obter um escopo mais amplo

Procure por páginas do CodeW3C.com no campo de texto abaixo

Este exemplo inclui quatro elementos:

  • Formulário HTML simples
  • JavaScript
  • Página PHP
  • Documento XML

Neste exemplo, os resultados estão em um documento XML (links.xml) para realizar a busca. Para simplificar este exemplo, fornecemos apenas 8 resultados.

Formulário HTML

Este é a página HTML. Ela contém um formulário HTML simples, estilos CSS para esse formulário e um link para o JavaScript:

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>

Explicação do exemplo - formulário HTML

Como você vê, a página HTML contém um formulário HTML simples, cujo campo de texto é chamado "txt1".

Como funciona o formulário:

  1. Quando o usuário pressiona e solta uma tecla no campo de texto, um evento é acionado
  2. Quando um evento é acionado, a função chamada showResult() é executada
  3. O elemento <div> chamado "livesearch" está abaixo do formulário. Ele serve como marcador para os dados retornados por showResult()

JavaScript

JavaScript código armazenado no arquivo "livesearch.js" conectado ao documento HTML:

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 return;
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp == null)
 {
 alert("O navegador não suporta solicitações HTTP");
 return;
 }
var url = "livesearch.php";
url = url + "?q=" + str;
url = url + "&sid=" + Math.random();
xmlHttp.onreadystatechange = stateChanged; 
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
} 
function stateChanged() 
{ 
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
 { 
 document.getElementById("livesearch").
 innerHTML = xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border = "1px solid #A5ACB2";
 } 
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
retorna xmlHttp;
}

Explicação de Exemplo:

GetXmlHttpObject com Requisição AJAX PHP tem o mesmo exemplo

A função showResult()

A função é executada a cada caractere inserido na caixa de texto

Se não houver entrada no campo de texto (str.length == 0), a função define o campo de retorno como vazio e remove qualquer borda ao redor

No entanto, se houver entrada no campo de texto, a função executa:

  1. Define o url (nome do arquivo) a ser enviado para o servidor
  2. Adiciona o parâmetro (q) com o conteúdo da caixa de entrada ao url
  3. Adiciona um número aleatório para evitar que o servidor use arquivos de cache
  4. Chama a função GetXmlHttpObject para criar o objeto XMLHTTP e informa a função executar stateChanged ao ser acionado uma mudança
  5. Usar a url fornecida para abrir o objeto XMLHTTP
  6. Enviar uma solicitação HTTP para o servidor

Função stateChanged()

Esta função é executada sempre que o estado do objeto XMLHTTP muda.

Quando o estado se torna 4 (ou "complete") é usado o texto da resposta para preencher o marcador de posição txtHint e configurar uma borda ao redor do campo de retorno.

Página PHP

A página do servidor chamada por código JavaScript é o arquivo PHP chamado "livesearch.php".

"livesearch.php" verifica o documento XML "links.xml". Este documento contém títulos e URLs de algumas páginas do site codew3c.com.

Este código buscará títulos que correspondam à string de pesquisa no arquivo XML e retornará resultados em HTML:

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 if ($y->item(0)->nodeType==1)
  {
  //find a link matching the search text
  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   if ($hint=="")
    {
    $hint="<a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   else
    {
    $hint=$hint . "<br /><a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   }
  }
 }
}
//Set output to "sem sugestão" if no hint were found
// or to the correct values
if ($hint == "")
 {
 $response="sem sugestão";
 }
else
 {
 $response=$hint;
 }
//output the response
echo $response;
?>

Explicação de Exemplo:

Se o JavaScript enviar qualquer texto (strlen($q) > 0), ocorrerá:

  1. Objeto XML DOM criado pelo PHP para o arquivo "links.xml"
  2. Percorrer todos os elementos "title" (nodetypes = 1) para encontrar o nome correspondente aos dados enviados pelo JavaScript
  3. Encontrar link contendo o título correto e configurar a variável "$response". Se encontrar mais de uma correspondência, todas serão adicionadas à variável
  4. Se não encontrar correspondências, configure a variável $response para "sem sugestão"
  5. $result é a saída enviada para o marcador "livesearch"