Twitter Flickr Pinterest LinkedIn YouTube Google Maps E-mail RSS
formats

Plantilla para crear un área de texto con la opción de autocompletar consultando a una base de datos. #PHP #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";
		}
	}
?>

 

descargar-twitter

 

Etiquetas:,

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Home Mysql Plantilla para crear un área de texto con la opción de autocompletar consultando a una base de datos. #PHP #wordpress
© www.palentino.es, desde el 2012 - Un Blog para compartir conocimientos ...

Uso de cookies en mi sitio palentino.es

Este sitio web utiliza cookies para que tengamos la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies

ACEPTAR
Aviso de cookies