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";
}
}
?>







