Buscador en tiempo real con ajax y php

Cuando un usuario escribe un carácter en el campo de entrada se ejecuta la función "showResult ()". La función es activada por el evento onkeyup del campo de búsqueda, la verdad es que es un ejemplo muy sencillo

HTML

<html>
<head>
<script>
function showResult(str)
{
if (str.length==0)
  { 
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

PHP

<?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 "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//output the response
echo $response;
?>

Editado

5
Puntos

5402
Visitas

5
Resp

Por alber hace 11 años

Admin

Respuesta #1

hola alber no entedi en php
linea 3

$xmlDoc->load("links.xml");

Saludos gracias

0
Puntos

Por fc2014 hace 11 años

Master

Respuesta #2

Hola sigo el tutorial de web ajax php... de zeuskx como implementaría yo el buscador en tiempo real con base en el buscador del tutorial?, no soy muy bueno con el código necesito su ayuda

0
Puntos

Por dacf94 hace 11 años

Novice

Respuesta #3

Hola fc2014 el archivo links.xml contiene todo los links o es como la base datos.. mira aqui

links.xml

<pages>
<link><title>Edgedial Bux Pro</title><url>http://adf.ly/ZUXnK</url></link>
<link><title>HTML a tag</title><url>http://www.w3schools.com/tags/tag_a.asp</url></link>
<link><title>HTML br tag</title><url>http://www.w3schools.com/tags/tag_br.asp</url></link>
<link><title>CSS background Property</title><url>http://www.w3schools.com/cssref/css3_pr_back.asp</url></link>
<link><title>CSS border Property</title><url>http://www.w3schools.com/cssref/pr_border.asp</url></link>
<link><title>JavaScript Date Object</title><url>http://www.w3schools.com/jsref/jsref_obj_date.asp</url></link>
<link><title>JavaScript Array Object</title><url>http://www.w3schools.com/jsref/jsref_obj_array.asp</url></link>
</pages>

espero haber ayudado...

0
Puntos

Por donjesco hace 11 años

Novice

Respuesta #4

esta interesante! pero no puede sacar los datos en vez de un .xml de una base de datos?

0
Puntos

Por zapikero hace 10 años

Developer

Respuesta #5

TEMA ACTUALIZADO!! Buscador en tiempo real con ajax y php a base de datos https://phpres.net/php-poo/buscador-en-tiempo-real-con-ajax-y-php-a-base-de-datos

0
Puntos

Por alber hace 10 años

Admin