martes, 8 de abril de 2014

Tutorial JQuery PHP usar JQuery UI Autocomplete con BD Mysql y PDO



Ya hemos visto algo de JQuery anteriormente en Tutorial Jquery desde 0, asi como de PHP con PDO en Tutorial PHP - PDO : Insertar , Modificar, Eliminar y Listar registros

JQueryUI tiene un widget o componente denominado Autocomplete, que puede hacer de nuestros desarrollos mas amigables y faciles de usar. Este componente, es un input tipo texto que va a ir presentando las coincidencias a medida que nuestros usuarios vayan digitando.



Para usar este widget lo primero es insertar la libreria JQuery y JQueryUI en nuestra pagina, asi como su hoja de estilos.
Podemos usar desde nuestra ruta local, pero para este ejemplo sera utilizando los CDN.

Estas tres lineas deben ir dentro de nuestra etiqueta <head>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Ahora vamos a incluir nuestro componente de texto:

-<input id="txt_lentes" type="text" name="txt_lentes" />

Y para terminar con el HTML, incluiremos el codigo Javascript que convierte nuestro input en un componente Autocomplete

$(function(){
  $("#txt_lentes").autocomplete({
     source: "buscar-producto.php"
  });
});

En nuestra funcion Javascript, lo que hacemos es con JQuery y su selector # seleccionamos nuestro componente input, y le decimos que lo convierta en un componente autocomplete.
En las siguientes lineas definimos la fuente o source, que es donde consultará los datos.

Cabe mencionar que este componente genera automaticamente una llamada GET al servidor agregando la variable term al archivo definido en source.

Como respuesta espera un objeto JSON, donde obligatoriamente debe haber el campo "value" que es el que mostrará como opciones.

Hasta acá hemos construido nuestro lado del cliente o vista, nos falta la parte del servidor o Backend, para esto usaremos PHP con PDO consultando una base de datos Mysql, similar a lo que hemos visto en Tutorial PHP - PDO : Insertar , Modificar, Eliminar y Listar registros

Como ven nuestro componente va a llamar a la pagina buscar-producto.php

Este es el codigo PHP, donde consultamos la base de datos MYSQL con PDO y transformamos nuestra consulta en JSON

try{

    //Capturamos nuestra variable que viene por el metodo GET
    $term=$_GET['term'];
    //Conectamos a la base de datos
    $con=new PDO('mysql:host=localhost;dbname=test', 'usuario', 'contrasenia');
    //Creamos nuestra sentencia 
    $sentencia=$con->prepare("select id, descripcion as value from producto where lcase(descripcion) like :term");
    //Ejecutamos pasando el parametro
    $sentencia->execute(array(':term'=>"%$term%"));
    //Obtenemos el resultado
    $resultados=$sentencia->fetchAll();
    //Convertimos el resultado en JSON
    echo json_encode($resultados);

}catch(PDOException $e){
    print "Hubo un error: " . $e->getMessage() . "
";
    echo $e->getMessage();
    die();
 }

Asi es como se ve nuestra llamada.


Espero les sea de ayuda.

No hay comentarios:

Publicar un comentario

 
Powered by Blogger