Buscador Ajax - Buscador automático PHP

Hoy vamos a ver como programar un buscador tipo como el de Google con Ajax (utilizando PHP).

Es el tipo de buscador, que según vamos escribiendo lo que estamos buscando va mostrando los resultados coincidentes.

Vamos a ello.

Para empezar vamos a tener una página donde se encontrará el buscador, que tendrá los siguientes códigos:

<!-- codigo html de arriba -->
<!-- script para la busqueda con ajax -->
<script type="text/javascript">
$(document).ready(function() {
 $("#parametro").keydown( //Evento de presionar una tecla en el campo cuyo id sea "parametro"
  function(event)
  {
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#resultado").load('../funciones/buscarcliente.php',{parametro:param}); //Y se envía por vía post al archivo buscarcliente.php para luego recargar el div con el resultado obtenido
  }
 );
});
$(document).ready(function() {
 $("#parametro").keyup( //Evento de soltar una tecla en el campo cuyo id sea "parametro"
  function(event)
  {
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#resultado").load('../funciones/buscarcliente.php',{parametro:param}); //Y se envía por vía post al archivo buscarcliente.php para luego recargar el div con el resultado obtenido
  }
 );
});
</script>
<!-- fin script de busqueda -->
<!--formulario donde estará solo el input de busqueda (sin submit)-->
    <form method="POST"> 
        <label>Nombre o Empresa</label>
        <input name="parametro" id="parametro" type="text" />
    </form>
<!-- fin de formulario -->
<!-- capa o sitio donde se irá mostrando los resultados -->
<div id="resultado"></div>
<!-- fin resultados -->

Y aquí el código de buscarcliente.php

<?php
include ("bd.php");
$link = Conectarse();
mysql_query("SET NAMES 'utf8'");

        $result;
        if(isset($_POST['parametro']))
        {
                $parametro=trim($_POST['parametro']);
                if($parametro!="")
                {
                        $result = mysql_query("SELECT * FROM cliente WHERE nombre LIKE '%$parametro%' or empresa LIKE '%$parametro%';");
                        $resultados = array();
                        while ($row_errs = mysql_fetch_array($result)) 
                        { 
                                $resultados[]= $row_errs; 
                        }
                        ?>
<div class="side_border">
                        <?php
                        foreach($resultados as $post):
                                ?>
<li class="black"><a href="clientes.php?idcliente=<?php echo $post[0]; ?>"><?php echo $post[1]; ?> 
<?php if ($post[8]!=""){  echo ": ".$post[8]; }?></a></li>                               
                                <?php
                        endforeach;
                        ?>
                        </div>
                        <?php
                }
        }
?>

En mi caso práctico me quedó algo así:

Ahora sólo tienes que adaptar el código a lo que tu quieras mostrar, tu tabla en la base de datos y tu estructura de archivos.

¡Espero que os sirva! ¡Un saludo!


Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Más articulos

Tweet

Escrito por Unknown

Si tienes alguna otra duda, o quieres comentar algo sobre el tema, te animo a que dejes un comentario. También puedes visitar nuestro foro. ¡Un saludo!