Ejemplo de uso PHP + AJAX
Este es un ejemplo básico de utilización de AJAX y PHP. Tendremos un campo input text en el cual teclearemos, y al mismo tiempo nos irá mostrando resultados que coincidan con nuestra búsqueda.
En nuestro caso, leeremos de un array de nombres de personas almacenados con PHP, pero sería muy sencillo adaptarlo a una búsqueda en la base de datos.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo AJAX PHP</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
function filtra(str) {
if (str.length == 0) {
document.getElementById("resultado").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("resultado").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "datos.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div class="container">
<header class="text-center">
<h1>Ejemplo AJAX con PHP</h1>
<hr/>
<p class="lead">Autocompletado de un campo</p>
</header>
<div class="col-lg-6" style="margin-bottom:50px;">
<form class="form">
Buscar por nombre: <input type="text" onkeyup="filtra(this.value)">
</form>
<br/>
<br/>
<b>Resultados</b>
<br/>
<br/>
<span id="resultado"></span>
</div>
<footer class="col-lg-12 text-center">
Adaweb - 2017
</footer>
</div>
</body>
</html>
datos.php
<?php
// Array with names
$a[1] = "Ana";
$a[2] = "Belén";
$a[3] = "Carmen";
$a[4] = "Daniel";
$a[5] = "Eva";
$a[6] = "Francisco";
$a[7] = "Germán";
$a[8] = "Hugo";
$a[9] = "Iván";
$a[10] = "Juán";
$a[11] = "Kitty";
$a[12] = "Luis";
$a[13] = "Nadia";
$a[14] = "Ontario";
$a[15] = "Pepe";
$a[16] = "Jaime";
$a[17] = "Jacinto";
$a[18] = "José";
// Parámetro para buscar
$q = $_REQUEST["q"];
$resultado = "";
// Comprobación
if ($q !== "") {
$q = strtolower($q);
$tam=strlen($q);
foreach($a as $nombre) {
if (stristr($q, substr($nombre, 0, $tam))) {
if ($resultado === "") {
$resultado = "<p>".$nombre."<p>";
} else {
$resultado .= "<p>".$nombre."<p>";
}
}
}
}
// Mensaje si no hay resultados
echo $resultado === "" ? "no existen coincidencias " : $resultado;
?>
Este sistema sería válido, por ejemplo, para autocompletar búsquedas. Una de las principales ventajas es que la búsqueda se realiza sin tener que recargar la página.
