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 })
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; ?>
Las acciones a realizar una vez devuelto los valores:
result(function(event, data, formatted) { $('#txtNombre').val(data[1]); $('#txtEdad').val(data[2]); $('#txtDireccion').val(data[3]); $('#selSexo').val(data[4]); $('#selEstCivil').val(data[5]); });
La llamada completa desde jQuery es:
<script type="text/javascript" > $(document).ready(function(){ $('#txtNombre').autocomplete('search.php?tip=a&opt=1', { width: 260, selectFirst: false }).result(function(event, data, formatted) { $('#txtNombre').val(data[1]); $('#txtEdad').val(data[2]); $('#txtDireccion').val(data[3]); $('#selSexo').val(data[4]); $('#selEstCivil').val(data[5]); }); }); </script>
Como ves, los limites pueden crecer al limite de tu imaginación. Solo hay que saber como organizar los datos y presentarlos en tu formulario.
Espero que les sirva.
Disfrútenlo y cualquier duda o comentario no teman en escribir.
Éxito.
Este ejemplo lo puedes ver en el siguiente enlace:
| ejemplo funcionando de Como utilizar autocompletex (suggest) de jQuery y no morir en el intento. |
Tambien puedes decargar estos ejemplos:
| archivos de Como utilizar autocompletex (suggest) de jQuery y no morir en el intento. | |
| Si te gustó o te sirvió, ya sabes que hacer |
|
26 de Mayo, 2009 - 17:01
La pregunta es como puedo hacer para controlar la cantidad de resultados que arroja la busqueda desde Jquery autocomplete?
Ya que cuando consulto una tabla con muchas coincidencias solo me muestra 10 resultados.
gracias por su apoyo.