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
<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
Puntos
5470
Visitas
Visitas
5
Resp
Resp
Por alber hace 122 meses
Administrador
Respuesta #1
hola alber no entedi en php
linea 3
linea 3
$xmlDoc->load("links.xml");Saludos gracias
0
Puntos
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
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
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
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?
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
Puntos
Por alber hace 102 meses
Administrador