Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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;
?>
5
Puntos
5470
Visitas
5
Resp
Por alber hace 122 meses
Administrador
Respuesta #1
hola alber no entedi en php
linea 3
$xmlDoc->load("links.xml");
Saludos gracias
0
Puntos
Por fc2014 hace 121 meses
Experto
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 121 meses
Principiante
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 116 meses
Principiante
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 102 meses
Avanzado Sitio web
Respuesta #5
TEMA ACTUALIZADO!! Buscador en tiempo real con ajax y php a base de datos https://datoweb.com/post/2509/buscador-en-tiempo-real-con-ajax-y-php-a-base-de-datos
0
Puntos
Por alber hace 102 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate