martes, 1 de marzo de 2011

Tutorial: Jquery UI autocomplete

Hace poco estaba creando un proyecto y cuando estaba usando codeigniter y jquery tuve unos problemas porque al enviar los parametros por get como lo hace autocomplete por defecto pues el sistema no hacia nada y se hiba a la pagina de inicio, pero para mi frustacion esto solo pasaba en el servidor y no en localhost asi que supuse que eran problemas quizas con el apache o algo asi y como andaba frustado porque no me funcionaba, decidi sentarme a revisar a ver si yo podria mandar la info en ves de por GET por POST, cuando busque por internet no conseguí nada de información, asi que me deje de vainas y me sente a arreglar yo mismo mi problema y lo solucione. Ahora quiero compartir esa info con ustedes y pongo este tutorial de como usar autocomplete.



¿Que es jquery UI Autocomplete?


Es un plugin de la librería jquery UI (USER INTERFACE), que nos permite agregar a un input text funcionalidad de mostrar un menú al usuario con las posibles opciones que puede buscar y eligir. de una lista pre-acomodada. Donde esa lista puede venir de un array, de un  xml en nuestro servidor o de un código en php que se conecte a mysql y le muestre lo que nos interesa.


Opciones o parámetros:


  • disabled: Inhabilita o habilita el autocomplete, la opción por default es false.
  • appendTo: Selección en que elemento se va a abrir nuestro menú. el default es body.
  • delay: Sirve para especificar el tiempo que autocomplete va a esperar para activarse.  default: 300.
  • minLength: El tamaño mínimo que debe tener el texto para empesar a buscar.default 1.
  • source: que puede ser un array o una función.



Eventos:


  • Create:  cuando se crea el autocomplete.
  • Search:  cuando se va a realizar una búsqueda.
  • Open:  cuando se abre el menú.
  • Focus: es cuando el foco se mueve a un item de la lista, en este caso seria solo cuando es con el teclado.
  • Select: Cuando se selección un elemento de la lista
  • Close: Cuando la lista es cerrada.
  • Change: Después de que un item es seleccionado.

¿Como se usa Jquery UI Autocomplete?

Primero la opción sencilla, seleccionamos nuestro input text y le especificamos un array como source:

$('#selectbox').autocomplete({source:["codeigniter", "php", "jquery", "javascript"]});


Podemos también crear un variable de tipo array pasársela como source, ejemplo:

var lenguajes = ["codeigniter", "php", "jquery", "javascript"];

$('#selectbox').autocomplete({
source:lenguajes
});


También podemos usar un source remoto como un script php para ello solo vastaria con poner  la dirección del script en el source, y el script deberia responder con las variable en formulada en json:

$('#selectbox').autocomplete({
source:"search.php"
});

En esta pagina conseguirán los ejemplos para cada cosa, si tienen alguna duda me pueden dejar un comentario y yo los ayudo.

http://jqueryui.com/demos/autocomplete/

Ahora bien, ¿como hago para pasar por post los comandos al php?


Pues no es muy complicado para el que no sabe usar $.ajax, debemos primero saber con en el parámetro source podemos usar funciones las funciones deben tener permitir que les pasen dos parámetros: request, response, la variable request almacena lo que el autocomplete esta buscando y response almacena la respuesta.

Ahora bien dentro de esa función vamos a crear una llamada ajax a nuestro script en php,  debemos especificarle la url y el tipo de dato que va a devolver, también usando request.term pasaremos el termino que se desea buscar y después el resultado en json se lo vamos a pasar a la función autocomplete a través de response para que ella cree su lista.

A la final nuestro script debería quedar así:

    $("#selectbox").autocomplete({
        source: function( request, response ) {
                $.ajax({
                    type: "POST",
                    url: "search.php",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response(data);
                    }
                });
            }
    });

Cave destacar que mediante este método, también podemos aprovechar las bondades de $.ajax y pasar varios parámetros al script ya que en el opción data de nuestra llamada ajax, podemos especificar varias variables, que era otra cosa que el autocomplete no nos permitia hacer.

Después haré un tuto para juntar esto con codeigniter y mysql, quizás con un poco de active record para que vean como es.

29 comentarios:

  1. Holas,
    Con la ayuda de este post intente usar el jQuery UI. Es muy completo, pero segui buscando algo mas simple como el plugin autocomplete. Me di con el mismo problema que contas, manda datos solo por get. Me anime a ver como trabaja el plugin para ver si podia cambiarlo, y asi lo hice. Solamente cambias los datos de la llamada ajax y todo funciona perfecto.

    ResponderEliminar
  2. claro es mas sencillo como tu dices, pero es mas "profesional" asi, porque de esta manera sirve con cualquier pagina o source que uses. Ademas no es complicado, es solo la misma llamada ajax, pero adentro esta la respuesta. suerte y que bueno que te sirvio mi post.

    ResponderEliminar
  3. Como con cualquier pagina o source? no entendi. Al cambiar el "jquery.autocomplete.min.js" se cambia todo lo que use. Si deseo hacer otro autocomplete(con otro source) no lo tengo que poner en el nuevo codigo porque el sistema ya funciona con $_POST.

    Esta muy bueno tu blog, felicitaciones :)

    ResponderEliminar
  4. A lo que me refiero con cualquier source, es que si el dia de mañana tienes que hacer un trabajo para un tercero, y el ya tiene llamadas del autocomplete y todas son por GET no vas a llegar porque tu eres bello y le vas hacer cambiar todos los script a POST. A eso es lo que me refiero. yo siempre soy de la idea de que mientras menos tenga que tocar las librerias principales mejor.

    Gracias, y un saludo.

    ResponderEliminar
  5. Ahh, y entonces lo volves a get de nuevo :P (O mejor aun podes conseguir el script original de nuevo :)). No tiene sentido cambiar todas las llamadas si sabes que con cambiar un solo archivo basta. Ademas, lo hice porque trabajo con codeigniter tambien :)

    ResponderEliminar
  6. sabras como hacer los select dinamicos es decir el problema de estado municipio parroquia

    ResponderEliminar
  7. si se hacerlo, voy a tratar a ver si este fin de semana publico una entrada sobre como se hace.

    ResponderEliminar
  8. Hola, en esta url esta el tutorial que me pediste:

    http://sosinformatico.blogspot.com/2011/10/jquery-crear-select-dinamico-estado.html

    ResponderEliminar
  9. Hola, alguien sabe como hacer para cambiar el tamaño de la caja del combobox de autocomplete de jqueryui? en un mismo formulario quiero varios combobox de distintos tamaños...

    ResponderEliminar
    Respuestas
    1. hola, no entiendo bien tu pregunta, sera que te puedes explicar un poco mejor.

      Eliminar
  10. Estimado muy agradecido por tu aporte, queria consultarte lo siguiente: como podemos hacer que el autocomplete solo acepte los valores pedefinidor en el source, por ejemplo tengo un input text con los codigos de area o de celular por ejemplo {source:["0414", "0416", "0412", "0424", "0426"]} el autocomplete funciona a la maravilla pero me permite colocar cualquier otro numero por ejemplo 0212 0234 etc... será posible que solo acepte los valores que yo predefini. Esperó entiendas mi pregunta y me puedas ayudar. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. hola, a la orden. si se a lo que te refieres, y te entiendo. no tengo nada escrito sobre el tema, pero lo puedes hacer con los eventos que se disparan, como blur, onchange o select. que lo que tendrías que hacer es comprobar que el valor este dentro del source sino le das un mensaje de error y lo borras. si necesitas ayuda me avisas y puedo hacer una entrada sobre el tema.

      Eliminar
  11. Como puedo una vez vaciado un combobox, dejar en blanco lo que había en la caja de texto?
    Y otra pregunta, como puedo en el comobox autocomplete que me seleccione el primero de la lista, que salga ya escrito.

    ResponderEliminar
    Respuestas
    1. No entiendo la primera pregunta.
      Con lo otro, tendria que saber mejor cual es el modus operandis de tu aplicación y pero seguramente puedas hacer uso de los eventos que estan en la API de Jquery UI AUTOCOMPLETE. http://api.jqueryui.com/autocomplete/#event-focus

      el evento FOCUS, o response tambien te pueden servir.

      Eliminar
  12. ufff excelente truco del source.... por medio del ajax del mismo jquery............ m taba matando como pasar parametros variables.........

    ResponderEliminar
  13. hola, soy nueva en esto y mi pregunta es la siguiente, si en vez de url: "search.php", yo colocara un archivo.json, con datos en formato json me deberìa de funcionar de la misma manera??

    ResponderEliminar
    Respuestas
    1. si porsupuesto, si tiene el formato correcto, no hay problema.

      Eliminar
  14. gracias Mariano por tu respuesta, lo que hice fue recuperar con getJson mi archivo y guardarlo en una variable, entonces desde el source le llamo directamente a mi variable y de esa forma me funciono correctamente

    ResponderEliminar
  15. Hola, estoy desarrollando una web y hace apenas unos días empecé con JQuery. He incluido la función autocompletar para añadir artículos a un pedido, únicamente se abre la lista desplegable con los datos del array cuando tecleo un carácter o una cadena de caracteres en el input text y quisiera poder abrir esa lista también mediante un botón sin necesidad de escribir ningún carácter así como si fuese un menú desplegable y que al escribir en el input text iniciase la discriminación. He intentado varias maneras pero no he sido capaz. Puedes verlo en: http://guadelmar.com/Pedido.php (por el momento la web solo se ve bien con Google Chrome).
    Agradecería mucho tu ayuda. Saludos.



    ResponderEliminar
    Respuestas
    1. coloca el minLength del autocomplete en 0, y dispara el evento open a ver que tal te va.

      Eliminar
  16. Hola, estoy implementando el autocomplete para buscar nombres de personas desde una BD, pero necesito que para cada sugerencia de búsqueda me muestre el nombre y la fecha de nacimiento, que tengo que modificar para que lo muestre?

    ResponderEliminar
    Respuestas
    1. en el value que retornas del php, cambia para que concatene los dos datos.

      Eliminar
    2. Hola gracias por tu respuesta, te comento que como lo que necesito es ver los otros datos en la sugerencia, entonces concatené el nombre junto con la fecha de nacimiento, y en el archivo php se ve que si lo hace, pero cuando el autocomplete muestra la sugerencia solo muestra el nombre, puedes ayudarme o darme algún ejemplo? gracias de antemano

      Eliminar
    3. dame codigo, para poder ayudarte. porque sino es complicado para mi

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
  17. Este es el codigo php que funciona

    class ElementoAutocompletar {
    var $value;
    var $nombre;
    function __construct($nombre, $value){
    $this->nombre = $nombre;
    $this->value = $value;
    }
    }
    $nombre = $_GET["term"];
    $conexion = mysql_connect("localhost", "usuario", "123");
    mysql_select_db("datareal");
    $consulta = "SELECT codigo, nombre, direccion FROM cliente WHERE nombre like '%" . $nombre . "%'";
    $resultado = mysql_query($consulta)or die (mysql_error());
    $arrayElementos = array();
    while ($fila = mysql_fetch_array($resultado)){
    array_push($arrayElementos, new ElementoAutocompletar(utf8_encode($fila["codigo"]), utf8_encode($fila["nombre"])));
    }
    mysql_close($conexion);
    print_r(json_encode($arrayElementos));

    Y esta fue la variante que hice, en el php hace la consulta y lo concatena, pero en el autocomplete de jQuery sigue mostrando solo el nombre
    class ElementoAutocompletar {
    var $value;
    var $nombre;
    var $direccion;

    function __construct($nombre, $value, $direccion){
    $this->nombre = $nombre." direccion ".$direccion;
    $this->value = $value;

    }

    }

    ResponderEliminar
    Respuestas
    1. En el value concatena nombre y fecha, asi te van a salir los dos en el autocomplete.

      Eliminar
  18. Necesito ayuda!!!!!! tengo un autocomplete al cual le paso como source un json de esta forma "value": 1,"label":"nombre", lo que quiero es que en el menu me muestre solo el nombre y al seleccionar un item poner el valor de value en otro input (esto si lo puedo hacer) el problema es que me muestra en el menu el valor de value, como lo puedo quitar del menu??

    ResponderEliminar