Palentino Blog

Plantilla para crear un área de texto con la opción de autocompletar consultando a una base de datos. #PHP #wordpress

Experto en wordpress

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

 

 

Salir de la versión móvil