Ingeniería Informática

Menú Navegación

Archivos

  • Septiembre 2009
  • Julio 2009
  • Abril 2009
  • Marzo 2009
  • Enero 2009
  • Noviembre 2008
  • Octubre 2008

Categorías

  • Equipo de jóvenes
  • General
  • JavaScript
  • jQuery
  • Liderazgo
  • PHP
  • xajax

A cerca de...

Me llamo Eliecer López, soy Ingeniero (e.) en Computación e Informática y estoy dedicado al desarrollo Web.
Espero te ayuden los tutoriales y ejemplos que aquí se encuentran.

Últimas 5…

  • Como agregar filas o rows a una tabla dinamicamente mediante jQuery
  • Como agregar filas o rows a una tabla dinamicamente mediante javaScript
  • Actualizando Wordpress
  • Como utilizar autocompletex (suggest) de jQuery y no morir en el intento.
  • Guardar en Base de Datos las filas agregadas dinamicamente con xajax

Vistas

Etiquetas

actualizar agregar-fila agregar-fila-dinamico-xajax ajax autocompletar autocomplete box cargando combo combobox dependientes dinamico equipo JavaScript jQuery Liderazgo loading organigrama organizacion PHP preload select suggest vision xajax

WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.

Anuncios Google

2009
13
Abr

Como utilizar autocompletex (suggest) de jQuery y no morir en el intento.

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:

Ver Ejemplo ejemplo funcionando de Como utilizar autocompletex (suggest) de jQuery y no morir en el intento.

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de Como utilizar autocompletex (suggest) de jQuery y no morir en el intento.
Si te gustó o te sirvió, ya sabes que hacer ;-)

Esta entrada fue publicada el Lunes, 13 de Abril de 2009 a las 15:27 y está clasificada bajo: PHP, jQuery. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.

« Guardar en Base de Datos las filas agregadas dinamicamente con xajax
Actualizando Wordpress »

37 comentarios sobre “Como utilizar autocompletex (suggest) de jQuery y no morir en el intento.”

Karen Martelo dijo:
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.

e_all dijo:
26 de Mayo, 2009 - 18:13

Lo que tu buscas es el parametro o la opción, mejor dicho, “max” el cual limita la cantidad de resultados mostrados en el selector.

$(‘#txtNombre’).autocomplete(’search.php?tip=a&opt=1′, {
width: 260,
selectFirst: false,
max: 20 // aumentamos a 20 el valor que viene por defecto.

cualquier duda o comentario, hazmela saber.

Exito.

Cristian Pino dijo:
22 de Junio, 2009 - 11:25

Mi pregunta es la siguiente…
lo que me pasa es que quiero llenar un ComboBox con los datos de la base de datos(eso me resulta), pero como hago que cuando piche una opcion por ejemplo un codigo me muestre todo lo de ese codigo dibujarlo ???

bueno si me pudieran ayudar seria bkn.

De ante mano gracias.

e_all dijo:
23 de Junio, 2009 - 17:26

Tu dices filtrar la busqueda según la selección hecha en el combo.
Bueno, si es así, la forma de hacerlo es especificar en el parámetro extraParams una función que retorne el valor del combobox y así llegará como una variable dentro del arreglo $_GET
el ejemplo quedaría de la siguiente manera:

$(document).ready(function(){

$(‘#txtNombre’).autocomplete(’search.php?tip=a&opt=1′, {
width: 260,
selectFirst: false,
extraParams: (tuCombo : function(){
return $(“#tuCombo”).val();
})
}).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]);
});
});

espero te ayude.
Exito.

Gonzalo dijo:
1 de Julio, 2009 - 22:15

Excelente post, muchísimas gracias.
Saludos.

zuvaja dijo:
2 de Julio, 2009 - 11:56

Una consultita… si yo tengo un listado de personas y cada una tiene una caja de texto en donde quiero ingresar una institucion de la cual provienen, como es un listado, el nombre de mis textos son asi : name=”txt_inst”.$obj_pers->nid_pers para que se diferencien uno de otro, mi problema es al momento de querer llenar la caja de texto no me carga y a mi funcion de llenado estoy enviando el parametro de nid_pers e hice esto:
$(‘#txt_inst’ + nid_pers).val(thisValue);
$(‘#nid_inst’ + nid_pers).val(thisID);

pero no me funciona, me pudieran ayudar por favor?
Gracias :)

e_all dijo:
14 de Julio, 2009 - 23:57

Disculpa la demora, no me llegan los correo avisandome de los nuevos post.

zuvaja, no entendí muy bien cual es el problema. Dices que al retornar de el autocomplete quieres asignar esos valores? podrias colocar un trozo de codigo más extenso para ver mejor a lo que te refieres.

atento a tu respuesta, me despido.

jesica dijo:
23 de Julio, 2009 - 21:56

Hola! muy buena la funcion ke hiciste de ajax!! me encanta, nomas tengo una consula, soy un poco primerisa en el java y php, se lo basico, a lo mejor mi pregunta es muy simple…
Como activo la funcion de guardar($formulario), para ke me inserte los campos en la bd?

e_all dijo:
23 de Julio, 2009 - 23:45

Bueno, si descargaste el ejemplo solo debes quitar los comentarios y cambiar las consultas sql de acuerdo a tus necesidades y, el archivo que está en la carpeta conexión con el nombre de servidor, usuario, contraseña y nombre de la bd que correspondan.

éxito.

Angel Atencio dijo:
27 de Julio, 2009 - 17:00

Buenas, tengo problemas al ingresar los datos a la base de datos, me da error y no se que hacer… :( …, use el mismo codigo de ejemplo, y me da el error 500.

e_all dijo:
27 de Julio, 2009 - 17:44

outch!
intenta ver el log de tu servidor para tener algo más específico que el error 500…

colocal tu codigo para ayudarte a analizarlo de la siguiente manera

< pre lang = 'php' >
tu codigo aca
< /pre>
debes quitar los espacios.
saludos.

Angel Atencio dijo:
29 de Julio, 2009 - 11:50

Hola que mas ya arregle el problema con la base de datos, muchas gracias por tu atencion, pero ahora tengo un problema que es el siguiente: quisiera que cuando le de a la tecla enter el guarde los datos, es decir, se valla a la funcion guardar, lo intente y no lo hace nose como hacerlo, soy principiante en xajax y jquery y no se como hacerlo…se les agradece ayuda…

cristian dijo:
11 de Agosto, 2009 - 13:15

muy bueno tu post.
claro que tengo una pregunta.
como puedo validar para que me busque con la letra “Ñ”, si pudieras ayudarme.

hsolar dijo:
27 de Agosto, 2009 - 15:32

para que devuelta el texto con ñ
en el search agregar
header(“Content-Type: text/html; charset=iso-8859-1″);

y para que muestre la ñ en la vista

agregrar htmlentities

$str .= htmlentities( $row5 [PER_NOMBRE] ) . ” $row5[PER_EDAD] – $row5[PER_SEXO]“;

en todo caso no es lo que preguntaba el ultimo niño pero puede salvar a alguien XD

Edu dijo:
4 de Septiembre, 2009 - 6:22

Primero de todo excelente función

Tengo un problemilla al mostrar las listas en firefox, me crea dos recuadros de lista, uno donde se muestran los resultados y otro exterior que en principio es el tamaño que se utiliza en ie.

Agradeceria mucho alguna solución

e_all dijo:
4 de Septiembre, 2009 - 10:26

Dejame ver si entendí… Dices que te aparecen dos recuadros con resultados o uno con resultados y otro vacio? si te aparece uno vacio te recomiendo que descargues el plugin original ya que recuerdo haber hecho algunos experimentos para que tapara los combobox en IE con un iframe… se debería solucionar solo con descargar los archivos nuevamente.
Si no es lo que te digo, avisame y lo vemos más en profundidad.

Exito.

Edu dijo:
6 de Septiembre, 2009 - 18:08

Me aparecen dos uno con los datos y el otro vacio, la url de test es http://www.eviajar.es/test/autocompletex.php y tengo la versión 3.5.2 de firefox
Muchas gracias por tu atención y un saludo.

e_all dijo:
7 de Septiembre, 2009 - 10:55

justamente lo que te decía… hace algún tiempo intenté solucionar un error en IE que cuando se despliega el resultado sobre un combobox este tapa el resultado y la única solución hasta esa fecha era agregar un iframe bajo el resultado con lo que se conseguía tapar el combobox. Debes bajar el plugin nuevamente desde http://plugins.jquery.com/project/autocompletex y reemplazarlo por el antiguo y el error se irá.
Exito.

Edu dijo:
7 de Septiembre, 2009 - 16:06

ok
ahora genial….
muchas gracias por todo

Ivan PR dijo:
25 de Septiembre, 2009 - 11:20

Excelente! saludos

hernan dijo:
5 de Octubre, 2009 - 15:39

Che algo de ventanas modales con jquery sabes ?
Saludos!

eALL dijo:
5 de Octubre, 2009 - 17:58

tienes que visitar la pagina http://www.jqueryui.com/demos/dialog/

espero te sirva.

Adios.

Miguel dijo:
21 de Octubre, 2009 - 3:10

Hola,

En primer lugar muchas gracias por este post, la documentacion de este plugin no esta muy bien y encotrar una pagina como esta ayuda y mucho. Felicidades.

Queria hacerte un par de preguntas:

¿Has intentado a pasar en la query ademas del parametro de consulta otro pero que sea dinamico? es decir imaginate que en un combo seleccionamos la provincia y en el autocompleter queremos que se carguen las localidades de esa provincia y cuando cambies de provincia vuelta a empezar.

Y por otro lado ¿sabes como hay que hacer para borrar la cache? he probado con el flushcache pero no parece tener efecto.

Muchisimas gracias de nuevo.

eALL dijo:
24 de Octubre, 2009 - 10:15

Claro Miguel, creo que me falto colocar eso en el ejemplo.
http://prodev.cl/2009/04/como-utilizar-autocompletex-suggest-de-jquery-y-no-morir-en-el-intento/#comment-58

fijate en la instrucción extraParams

Para la cache yo utilizo el parámetro
cacheLength=0

exito.

Oscar dijo:
18 de Noviembre, 2009 - 17:49

Hola. Mi pregunta es: ¿Cómo puedo saber por código si el autocomplete me devuelve resultados o no?

Luis dijo:
19 de Noviembre, 2009 - 13:58

Orale muy buen aporte, felicidadez.

Luis dijo:
19 de Noviembre, 2009 - 16:10

Hola oye como configuro para la base de datos, le meto toda la informacion correcta a class.conexionDB.inc.php, pero en public $id = “”; no se que poner.
 
me manda el siguiente error:
<cite>* Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/…/conexion/class.conexionDB.inc.php on line 43</cite>
 
saludos!

eALL dijo:
20 de Noviembre, 2009 - 18:36

Que tal Luis.
El id lo asigna solo la clase una vez que te conectas, por lo que no debes colocar nada allí. Ese error probablemente sea debido a que la consulta no devuelve datos o algo por el estilo que hace que el parámetro de la funcion sea invalido.
Revisa el resultado de la consulta y ve si está correcto.

Exito y gracias por el apoyo.

eALL dijo:
20 de Noviembre, 2009 - 18:43

Hola Oscar.
Una solución a eso podría ser preguntando por la cantidad de elementos del arreglo data

if(data.length > 0)

espero te sirva.
Exito.

Emiliano dijo:
26 de Noviembre, 2009 - 1:57

Hola, al realizar una búsqueda me gustaría que en vez de que se rellenara el campo del formulario con el resultado elegido, el usuario pudiera hacer click en el resultado e irse a otra página.
La idea sería que si estoy buscando en un listado de  noticias, que al desplegarce los resultados pudiera hacer click y redirigirme directamente a esa noticia.
Lo que hice fue agregar html al script de php: (a)resultado(/a). El problema es que en vez de funcionar como link, el script sigue rellenando el INPUT con el valor elegido en vez de dirigirme al valor especificado en (href).
Qué puedo hacer? muchas gracias de antemano.

eALL dijo:
28 de Noviembre, 2009 - 7:37

Hola Emiliano.
Si lo que quieres es redireccionar la página completa, en la funcion result puedes utilizar location.href=resultado para dirigir tu página a la dirección seleccionada.

Cualquier duda, me comentas.

luis dijo:
5 de Diciembre, 2009 - 0:44

Hola una pregunta, cuando se empieza a introducir datos al cmpo de texto van apareciendo los resultados similares, por tu respuesta de arriva ya vi como quitar los resultados (ya que no quiero que se vallan viendo las coincidencias) entonces al no haber coincidencias que seleccionar no se autollenan los demas campos ¿como le hago para que se llenen en automatico tan solo con que la informacion del primer input coincida con algun dato de la columna de mi tabla? Oh que empieze a hacer la busqueda de coincidencias apartir de “N” cantidad de caracteres?
 
osea sin necesidar de dar clic o enter..
 
saludos.

eALL dijo:
10 de Diciembre, 2009 - 8:51

Que tal luis,
Para hacer lo que deseas es necesario agregar la opción selectFirst:true para que automáticamente seleccione el primer item de la lista.

Para que comience a buscar desde N caracteres debes colocar la opción minChars:N de esta manera comenzará la busqueda después de que se ingrese el N caracter.

Espero que te sirva.
Adios.

jorge dijo:
12 de Febrero, 2010 - 0:55

Hola.
Que funcion tiene el operador Delay??
Otra cosa, no me funciona el cacheLength=0 ni flushCache(),  no marcan error, simplemente no lo hacen, alguna seugerencia?

eALL dijo:
13 de Febrero, 2010 - 20:40

Hola jorge,
El operador delay sirve para fijar el retraso con que el resultado de la búsqueda será mostrado.

el cacheLength=0 impide que se guarde en el caché los resultados de búsquedas anteriores. Si lees la documentación original verás que indica que éste valor debe ser mayor a cero, aunque yo lo he utilizado con el valor en cero y me ha funcionado.

no he utilizado el metodo flushCache por lo que en este momento no podría ayudarte.

Que estés bien.

Luis dijo:
25 de Febrero, 2010 - 21:25

Hola, una ultima consulta, la funcion solo hace la busqueda cuando el primer caracter es una letra ¿pero si lo que voy a buscar son numeros? como le hago para que haga la busqueda si lo primero que oprimo es un numero?
 
gracias y saludos.

InuYasha dijo:
26 de Febrero, 2010 - 3:04

Realmente te agradezco por este manual, creo que gracias a ti no mori en el intento, llevo 3 dias tratando de solucionar todo esto que has explicado, me has sacado de un apuro.
Gracias por compartirlo

Deje un comentario

Entradas (RSS) y Comentarios (RSS).
ProDev está gestionado con WordPress - Theme created by templatr