En esta entrada os dejo el código necesario para emplear la opción de consulta en tiempo real sobre una base de datos mysql, usando php y JQuery con la llamada.
La idea es la siguiente:
Cuando insertemos texto, el inputbox nos mostrará las posibles sugerencias encontradas en la base de datos en tiempo real y sin necesidad de refrescar la página a modo de sugerencias. Parecido al buscador de google. Podemos ver un ejemplo en esta página: ejemplo
Para ello es precio descargarse los ficheros que adjunto. Esta desarrollado para trabajar con WordPress a modo de página para un template.
Explicación:
La pagina a medida.php contiene el formulario y el input para realizar la llamada, así como los scripts necesarios a pie de página.
<?php /* Explicación de una pagina para wordpress con opcion de busqueda con autocompletado. www.palentino.es Template Name: consultarJquery */ ?> <?php get_header(); ?> <div class="container"> <div class="row"> <?php if ( have_posts() ) while ( have_posts() ) { ?> <div class="post_container"> <h1>Ejemplo de consulta</h1> <form action="mi-pagina-php" method="post"> Por favor, introduce la consulta o palabras clave<br/> Ejemplo: Filtrar datos </br> <input type="text" name="truco" id="truco" value="" /> <br/> <input type="submit" value="|| Realizar una consulta ||" /> </form> </br> <?php the_post(); the_content(); } ?> </div> <div class="widget-container" style=""> <?php get_sidebar(); ?> </div> </div> </div> <?php comments_template(); ?> <?php //Muestra el pie get_footer(); ?> ?> <!-- Necesario para que funcione - ojo necesita se llamado al final --> <script type="text/javascript" src="autocompletar/jquery.js"></script> <script type="text/javascript" src="autoocompletar/jquery.autocomplete.js"></script> <link rel="stylesheet" type="text/css" href="autocompletar/jquery.autocomplete.css" /> <script> $(document).ready(function(){ $("#truco").autocomplete("autocompletar/autocomplete.php", { selectFirst: false }); }); </script>
La carpeta autocompletar contiene la css y los js de jquery.
Interesante es fijarse en la página que devuelve las consultas llamada autocomplete.php
Recuerda adaptar la consulta SQL de llamada y el campo que deseas retornar.
Para finalizar, cuidado con las rutas, si tienes muchos problemas, cámbialas a absolutas.
<?php $q=$_GET['q']; $my_data=mysql_real_escape_string($q); $mysqli=mysqli_connect('mi-base-de-datos-mysql-direccion','usuario','password','base') or die("Error en la base"); // Necesario para evitar mostrar caracteres extraños mysqli_set_charset ($mysqli, "utf8"); $sql="SELECT texto FROM mitabla WHERE texto LIKE '%$my_data%' ORDER BY texto"; $result = mysqli_query($mysqli,$sql) or die(mysqli_error()); if($result) { while($row=mysqli_fetch_array($result)) { echo $row['texto']."\n"; } } ?>