Caja de texto con opción de autocompletado utilizando PHP, MySQL y jQuery

Stay hungry, stay foolish

Steve Jobs

El post del día de hoy es sobre la opción de autocompletar que podemos colocar en las cajas de texto de un formulario para que conforme el usuario vaya escribiendo la aparezcan sugerencias a partir de la información almacenada en una base de datos. Lo vamos a hacer utilizando el widget Autocomplete de jQueryUI, PHP para el código a ejecutarse en el servidor y MySQL como gestor de base de datos.

Ejemplo: Información alumno

El ejemplo consiste en lo siguiente: Tendremos un formulario HTML en el cual el usuario captura una matricula(con autocompletar), una vez  capturada la matricula la información del alumno se rellenará automáticamente.

Formulario HTML

El formulario tendrá 4 campos: matricula, nombre, paterno y materno.

<form>
   <label for="matricula">Matricula:</label>
   <input type="text" id="matricula" name="matricula" value=""/> <br/>
   <label for="nombre">Nombre:</label>
   <input type="text" id="nombre" name="nombre" value=""/> <br/>
   <label for="paterno">Paterno:</label>
   <input type="text" id="paterno" name="paterno" value=""/> <br/>
   <label for="materno">Materno:</label>
   <input type="text" id="materno" name="materno" value=""/>
</form>

jQuery

Lo primero que tenemos que hacer es incluir la libreria  jQuery y jQueryUI , las podemos descargar y enlazar de forma local o lo podemos hacer desde google. Tambien es necesario incluir el css del tema jQueryUI que se desea utilizar. Todo esto lo ponemos dentro de la etiqueta <head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="css/jqueryui.css" type="text/css" rel="stylesheet"/>

Posteriormente colocamos la declaración $(document).ready y agregamos el siguiente código.

$(document).ready(function(){
    $( "#matricula" ).autocomplete({
    	source: "buscaralumno.php",
    	minLength: 2
    });

    $("#matricula").focusout(function(){
    	$.ajax({
      	    url:'alumno.php',
    	    type:'POST',
    	    dataType:'json',
    	    data:{ matricula:$('#matricula').val()}
    	}).done(function(respuesta){
    	    $("#nombre").val(respuesta.nombre);
    	    $("#paterno").val(respuesta.paterno);
    	    $("#materno").val(respuesta.materno);
    	});
    });
});

En la primer parte agregamos al cuadro de texto matricula el widget autocomplet de jQuery UI y configuramos sus opciones:

  • source: Indica a partir de donde tomará la lista de valores que va a mostrar al usuario, en este ejemplo va a ser un archivo llamado buscaralumno.php el cual devolverá un arreglo json con los valores a mostrar.
  • minLength: Indica los caracteres mínimos que se tienen que capturar para que haga la petición al servidor y presente la lista.

La segunda parte consiste en solicitar al servidor los datos cuando la caja de texto matricula pierda el foco, una vez que esto pasa se hace una petición ajax que devolverá la información del alumno, los datos los va a devolver como json.

PHP

En el servidor vamos a tener 2 archivos PHP, el primero llamado buscaralumno.php que va a devolver la lista de matriculas y el segundo, alumno.php devolverá la informacion de un alumno en particular.

buscaralumno.php

Lo que hacemos es este archivo es almacenar en la variable matricula el dato que se va a buscar, dicho valor se obtiene de la variable global $_GET  con el nombre term, posteriormente se crea una conexión a la base de datos y se ejecuta la consulta que devolverá la lista de matriculas, las cuales se almacenan en un arreglo llamado matriculas, al final ese arreglo se pasa a json y se imprime para que regrese la respuesta.


$matricula = $_GET['term'];

$conexion = new mysqli('servidor','usuario','password','basedatos',3306);

$consulta = "SELECT matricula FROM tblalumno WHERE matricula LIKE '%$matricula%'";

$result = $conexion->query($consulta);

if($result->num_rows > 0){
    while($fila = $result->fetch_array()){
        $matriculas[] = $fila['matricula'];
    }
echo json_encode($matriculas);
}

alumno.php
En el archivo alumno.php tenemos el codigo que va a devolver la información del alumno en base a la matricula seleccionada, dicha matricula la recibimos mediante la variable global $_POST, se crea la conexión a la base de datos y se ejecuta la consulta. Posteriormente se agrega a la variable respuesta los datos del alumno y se imprime como json.


$matricula = $_POST['matricula'];
$conexion = new mysqli('servidor','usuario','password','basedatos',3306);
$consulta = "SELECT nombre,paterno,materno FROM tblalumno WHERE matricula = '$matricula'";
$result = $conexion->query($consulta);

$respuesta = new stdClass();
if($result->num_rows > 0){
    $fila = $result->fetch_array();
    $respuesta->nombre = $fila['nombre'];
    $respuesta->paterno = $fila['paterno'];
    $respuesta->materno = $fila['materno'];
}
echo json_encode($respuesta);

Eso es todo en el ejercicio del dia de hoy, si les fue de ayuda dejen sus comentarios, recomienden el blog y sigan practicando. Aqui les dejo el link de descarga.

download