Autocompletar busquedas con Ajax en PHP

Autocompletar busquedas con Ajax en PHP

Todos conocemos cientos de páginas que van autocompletando las búsquedas de un formulario.

Esto se realiza de una manera sencilla con Ajax.

Con este pequeño ejemplo voy a explicar cómo hacerlo de una manera muy sencilla.

Voy a empezar por el final, creando el fichero que tiene la lógica para ejecutar las consultas.

El fichero lo llamaremos busca.php y contiene los diferentes elementos.

Un array con el listado de nombres a buscar

// Array con los nombres
$a[] = "Ana";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johana";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Elena";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violeta";
$a[] = "Liza";
$a[] = "Elisa";
$a[] = "Wenche";
$a[] = "Victoria";

Dos variables una para el envio por get y la otra para guardar el resultado.

//obtenemos con get la cadena de texto 
$q = $_REQUEST["q"];

$hint = "";

Un bucle que utilizaremos para recorrer el array de nombres y encontrar coincidencias.

//recorremos el array buscando coincidencias en cada nombre
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, strlen($q)))) {
            if ($hint === "") {
                $hint = $name;
            } else {

                $hint = $hint . ", $name";
            }
        }
    }

Y por ultimo un echo que pintara la coincidencia en el navegador web

/pintamos la sugerencia
    if ($hint === ""){
        echo "no existe sugerencia";
    }
    else{
        echo  $hint;
    }

El fichero busca.php seria el siguiente:

<?php
// Array con los nombres
$a[] = "Ana";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johana";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Elena";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violeta";
$a[] = "Liza";
$a[] = "Elisa";
$a[] = "Wenche";
$a[] = "Victoria";

//obtenemos con get la cadena de texto 
$q = $_REQUEST["q"];

$hint = "";

//recorremos el array buscando coincidencias en cada nombre
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, strlen($q)))) {
            if ($hint === "") {
                $hint = $name;
            } else {

                $hint = $hint . ", $name";
            }
        }
    }

//pintamos la sugerencia
    if ($hint === ""){
        echo "no existe sugerencia";
    }
    else{
        echo  $hint;
    }
?> 

Lo siguiente es crear la pagina index.php que es donde se mostraran los coincidencias en un formulario.

Que incluye, unn input de tipo texto que llama al la funcion javascript buscaSugerencia cuando se teclea y un span con id textoBuscar donde se pintaran las sugerencias.

<body>
<p><b>Nombre a buscar :</b></p>
<form>
<!-- ejectuamos funcion buscaSugerencia al teclear-->
Nombre: <input type="text" onkeyup="buscaSugerencia(this.value)">
</form>
<!-- en span id="textoBuscar" si pintan las sugerencias -->
<p>Sugerencia: <span id="textoBuscar"></span></p>
</body>

Y en la cabecera de la pagina incluiremos el script en javascript que se encarga de realizar las busquedas con ajax.

En el que se instancia el objeto XMLHttpRequest y se envia la solicitud a un archivo PHP (busca.php) en el servidor, el parámetro q se agrega a la url (busca.php? Q = «+ cadenaTexto)

<script>
//Explicación del código:

//verifique si el campo de entrada está vacío (str.length == 0). Si es así, borre el contenido del marcador de posición txtHint y salga de la función.
function buscaSugerencia(cadenaTexto) {
    if (cadenaTexto.length == 0) {
        document.getElementById("textoBuscar").innerHTML = "";
        return;
    } else {
        //AJAX
        //Creamos un objeto XMLHttpRequest
        var xmlhttp = new XMLHttpRequest();
        //Funcion que cambia el estado
        xmlhttp.onreadystatechange = function() {
                //pintamos la sugerencia
                document.getElementById("textoBuscar").innerHTML = this.responseText;
        };
        //Envia la solicitud a un archivo PHP (busca.php) en el servidor, el parámetro q se agrega a la url (busca.php? Q = "+ cadenaTexto)
        xmlhttp.open("GET", "busca.php?q=" + cadenaTexto);
        xmlhttp.send();
    }
}
</script>

El fichero index.html seria el siguiente:

 <html>
<head>
<script>
//Explicación del código:

//verifique si el campo de entrada está vacío (str.length == 0). Si es así, borre el contenido del marcador de posición txtHint y salga de la función.
function buscaSugerencia(cadenaTexto) {
    if (cadenaTexto.length == 0) {
        document.getElementById("textoBuscar").innerHTML = "";
        return;
    } else {
        //AJAX
        //Creamos un objeto XMLHttpRequest
        var xmlhttp = new XMLHttpRequest();
        //Funcion que cambia el estado
        xmlhttp.onreadystatechange = function() {
                //pintamos la sugerencia
                document.getElementById("textoBuscar").innerHTML = this.responseText;
        };
        //Envia la solicitud a un archivo PHP (busca.php) en el servidor, el parámetro q se agrega a la url (busca.php? Q = "+ cadenaTexto)
        xmlhttp.open("GET", "busca.php?q=" + cadenaTexto);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Nombre a buscar :</b></p>
<form>
<!-- ejectuamos funcion buscaSugerencia al teclear-->
Nombre: <input type="text" onkeyup="buscaSugerencia(this.value)">
</form>
<!-- en span id="textoBuscar" si pintan las sugerencias -->
<p>Sugerencia: <span id="textoBuscar"></span></p>
</body>
</html> 

Con esta pequeña aplicacion podemos ver como s enos van mostrando las sugerencias por pantalla.

Ejemplo sugerencia

El codigo lo podeis obtener desde aqui https://github.com/victorgarciasisi/basicAjax

Y la demo la podeis ver aqui http://programacionconphp.com/dev/basicAjax/

Deja un comentario