AJAX se puede utilizar para crear más búsquedas fáciles de usar e interactivos.
AJAX Live Search
El siguiente ejemplo demostrará una búsqueda en vivo, donde se obtiene los resultados de búsqueda mientras se escribe.
búsqueda en tiempo real tiene muchas ventajas en comparación con los tradicionales de búsqueda:
- Los resultados se muestran a medida que escribe
- Restringir los resultados a medida que continúe escribiendo
- Si los resultados son demasiado estrechos, eliminar caracteres ver un resultado más amplio
Buscar una página de w3ii en el campo de entrada a continuación:
Los resultados en el ejemplo anterior se encuentran en un archivo XML ( links.xml ) . Para hacer este ejemplo pequeño y simple, sólo seis resultados están disponibles.
Ejemplo Explicación - La página HTML
Cuando un usuario escribe un carácter en el campo de entrada anterior, la función " showResult() " se ejecuta. La función se activa por el "onkeyup" evento:
<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>
El código fuente explicación:
Si el campo de entrada está vacía (str.length==0) , la función borra el contenido del marcador de posición LiveSearch y sale de la función.
Si el campo de entrada no está vacía, el showResult() función ejecuta la siguiente:
- Crear un objeto XMLHttpRequest
- Cree la función a ejecutar cuando la respuesta del servidor está listo
- Enviar la solicitud fuera a un archivo en el servidor
- Nótese que un parámetro (q) se añade a la URL (con el contenido del campo de entrada)
El archivo PHP
La página en el servidor llamado por el código JavaScript anterior es un archivo PHP llamado "livesearch.php" .
El código fuente en "livesearch.php" busca en un archivo XML para los títulos que coincidan con la cadena de búsqueda y devuelve el resultado:
<?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 was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
Si hay algún texto enviado desde el código JavaScript ( strlen($q) > 0), ocurre lo siguiente:
- Cargar un archivo XML en un nuevo objeto DOM XML
- Recorrer todos los elementos <title> para encontrar coincidencias del texto enviado desde el código JavaScript
- Establece la URL correcta y el título en el "$response" variable. Si se encuentra más de una coincidencia, todos los partidos se añaden a la variable
- Si no se encuentran coincidencias, la variable $ respuesta se establece en "no suggestion"