Un aditivo para nuestras paginas webs o formularios es agregar la funcionalidad de autocompletar o sugerir los resultados en un campo de texto, especialmente cuando la cantidad de resultados es demasiado grande como para colocarla dentro de select.

Uno de los más completos que he podido ver y el cual he adoptado en la mayoría de los proyecto que he llevado a cabo es el plugin de jQuery autocompletex de Jörn Zaefferer http://plugins.jquery.com/project/autocompletex

Este plugin es muy completo. Te permite enviar parámetros extra, recibir más de un parámetro a través de un arreglo, soporte para hacer las consultas asincrónicamente, consultar desde prácticamente cualquier archivo o script que genere una salida formateada como lo indica el plugin, entre otras.

En este tutorial me enfocaré a las consultas a través de PHP y MySQL, rescatando las opciones desde una BD y devolviendo los resultados al formulario que lo solicita y llenaremos más de un campo con los resultados obtenidos.

Vamos a la acción. Utilizando uno de los formularios utilizados anteriormente rescataremos información de personas utilizando autocomplete en el campo nombre.

El funcionamiento es bastante sencillo. El plugin llama mediante ajax a un archivo que genera un arreglo. la clave de todo está en que envía un parametro por metodo GET con el nombre ‘q’ (supongo que viene del ingles query) el cual contiene los caracteres tipeados por el usuario. Con este valor podremos filtrar nuestra consulta y generar una especie de arreglo que despues llegará a JS con el nombre data. En la primera posición estará lo que se muestra en el listado desplegable y de la segunda en adelante podremos utilizarla a gusto. Veamos un ejemplo.

Para esto debemos agregar los script necesarios y lo típico para utilizar jQuery.

Las inclusiones:

<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquerymenu/jqueryslidemenu.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>

El código de la llamada:

<script type="text/javascript" >
 
$(document).ready(function(){
 
        $('#txtNombre').autocomplete('search.php?tip=a&opt=1', { //ID DEL CAMPO QUE SERA AUTOCOMPLETABLE
            width: 260,
            selectFirst: false
        })
</script>

El PHP que genera el resultado

 
< ?php
session_start();
require_once ("conexion/class.conexionDB.inc.php");
$conn = new conexionBD ( );
extract ( $_GET );
 
/* Consulta a Bases de datos. */
if (isset ( $tip ) && $tip == 'a'){
    if ($opt == 1) {
        $sql = " SELECT DISTINCT
                    PER_NOMBRE,
                    PER_EDAD,
                    PER_DIRECCION,
                    PER_SEXO,
                    PER_ESTCIVIL
                FROM
                    PERSONA";
        if($q != ""){
            $sql .= " WHERE
                        (PER_NOMBRE like N'%$q%')  ";
        }
        $sp = $conn->EjecutarSQL ( $sql );
        //$separador = "MOD: ";
        while ( $row5 = $conn->FetchArray( $sp ) ) {
            $str .= trim ( $row5 [PER_NOMBRE] ) . " $row5[PER_EDAD] - $row5[PER_SEXO]";  //LO QUE SERA MOSTRADO EN EL RECUADRO DESPLEGABLE
            $str .= '|';
            $str .= trim ( $row5 [PER_NOMBRE] ); //LO QUE ASIGNAREMOS AL CAMPO NOMBRE
            $str .= '|';
            $str .= trim ( $row5 [PER_EDAD] );
            $str .= '|';
            $str .= trim ( $row5 [PER_DIRECCION] );
            $str .= '|';
            $str .= trim ( $row5 [PER_SEXO] );
            $str .= '|';
            $str .= trim ( $row5 [PER_ESTCIVIL] );
            $str .= "\n";
        }
    }
}
 
echo $str;
?>

(más…)

Una de las tareas típicas de un programador es crear comos dinámicos o dependientes. Para esta tarea habia que nesesariamente recargar la pagina. Gracias a la tecnología Ajax eso es parte de la historia.
En este articulo esplicaré como hacerlo mediante la libreria xajax.
Básicamente lo que haremos será llamar a nuestra función PHP mediante xajax y generaremos el código HTML que incrustaremos en una etiqueta div. (más…)