Búsqueda en vivo AJAX con PHP

AJAX puede proporcionar a los usuarios una experiencia de búsqueda más amigable e interactiva.

Búsqueda en tiempo real AJAX

En el siguiente ejemplo de AJAX, demostraremos una búsqueda en tiempo real.

La búsqueda en tiempo real tiene muchas ventajas en comparación con la búsqueda tradicional:

  • Los resultados se muestran a medida que se escribe
  • Los resultados se filtran a medida que se sigue escribiendo
  • Si los resultados son pocos, eliminando caracteres se puede obtener un rango más amplio

Busca en el siguiente cuadro de texto en las páginas de CodeW3C.com

Este ejemplo incluye cuatro elementos:

  • Formulario HTML simple
  • JavaScript
  • Página PHP
  • Documento XML

En este ejemplo, los resultados se encuentran en un documento XML (links.xml) para realizar la búsqueda. Para mantener este ejemplo pequeño y simple, solo se proporcionan 8 resultados.

Formulario HTML

Esta es la página HTML. Contiene un formulario HTML simple, los estilos CSS para este formulario y un enlace hacia el 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>

Ejemplo de explicación - Formulario HTML

Como puedes ver, la página HTML contiene un formulario HTML simple, con un cuadro de texto llamado "txt1".

Así funciona el formulario:

  1. Un evento se desencadena cuando el usuario presiona y suelta una tecla en el cuadro de texto
  2. Se ejecuta la función llamada showResult() cuando se dispara un evento
  3. Bajo el formulario hay un elemento <div> llamado "livesearch" que se utiliza como marcador de posición para los datos devueltos por showResult()

JavaScript

JavaScript código se almacena en el archivo "livesearch.js" conectado con el documento HTML:

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 devuelve;
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp == null)
 {
 alert("El navegador no admite solicitudes HTTP");
 devuelve;
 }
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");
  }
 }
devuelve xmlHttp;
}

Explicación del ejemplo:

GetXmlHttpObject con Solicitudes AJAX con PHP tiene ejemplos idénticos.

La función showResult()

Esta función se ejecuta cada vez que se ingresa un carácter en el cuadro de texto.

Si no hay entrada en el campo de texto (str.length == 0), la función establece el campo de retorno en vacío y elimina cualquier borde circundante.

Sin embargo, si hay entrada en el campo de texto, la función ejecuta:

  1. Defina la url (nombre de archivo) que se enviará al servidor
  2. Añada el parámetro (q) con el contenido de la casilla de entrada a la url
  3. Añada un número aleatorio para evitar que el servidor use archivos de caché
  4. Llame a la función GetXmlHttpObject para crear el objeto XMLHTTP y notifique a esta función que ejecute una función llamada stateChanged cuando se desencadene un cambio
  5. Usar la url proporcionada para abrir el objeto XMLHTTP
  6. Enviar una solicitud HTTP al servidor

Función stateChanged()

Esta función se ejecutará cada vez que cambie el estado del objeto XMLHTTP.

Cuando el estado sea 4 (o "complete") se llenará el contenido del marcador de posición txtHint con el texto de respuesta y se colocará un borde alrededor del campo de retorno.

Página PHP

La página del servidor llamada "livesearch.php" es llamada por el código JavaScript.

"livesearch.php" revisa ese documento XML "links.xml". Este documento contiene los títulos y URL de algunas páginas en codew3c.com.

Estos códigos buscarán títulos que coincidan con la cadena de búsqueda en el archivo XML y devolverán resultados en 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 "sin sugerencias" if no hint were found
// or to the correct values
if ($hint == "")
 {
 $response="sin sugerencias";
 }
else
 {
 $response=$hint;
 }
//output the response
echo $response;
?>

Explicación del ejemplo:

Si se envió algún texto desde JavaScript (strlen($q) > 0), ocurre:

  1. Un objeto XML DOM creado por PHP para "links.xml"
  2. Se recorren todos los elementos "title" (nodetypes = 1) para encontrar el nombre que transmite JavaScript
  3. Se encuentra un enlace que contiene el título correcto, y se establece como la variable "$response". Si se encuentran más de una coincidencia, todas las coincidencias se agregarán a la variable
  4. Si no se encuentra una coincidencia, se establece la variable $response en "sin sugerencias"
  5. $result es la salida enviada al marcador de posición "livesearch"