19th Ave New York, NY 95822, USA
+1 916-875-2235
+1 916-875-2235

Ejemplo de uso PHP + AJAX

Cómo realizar busquedas mientras escribes en Ajax con PHP

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.

 

Contenidos relacionados

2 comentarios

En qué parte el código del código php se indica cuál va a ser el texto que se va a enviar a JavaScript?. Por qué aquí se utiliza el echo: // Mensaje si no hay resultados
echo $resultado === “” ? “no existen coincidencias ” : $resultado;
?>
pero cuando se encuentra un resultado cómo se le dice a php el texto a enviar como respuesta?

YA ME DI CUENTA xD

Escribe una respuesta