Autocompletado con jQuery

Autocomplete, que forma parte de la librería jQuery UI, es uno de los muchos plugins de autocompletado disponibles para jQuery; plugins que permiten mostrar una serie de sugerencias al usuario mientras este está escribiendo en una caja de texto. Esta funcionalidad, además de ahorrar algo de tiempo al usuario, también es un sistema mucho menos propenso a errores. Este es el aspecto de una caja de texto decorada con este plugin:

Plugin de autocompletado para jQuery

Su uso es bastante sencillo: sólo tenemos que incluir el código de jQuery y Autocomplete en nuestro documento HTML, y, opcionalmentev, su hoja de estilo; seleccionar el elemento al que añadir la funcionalidad de autocompletado, pasando un selector a la función $ / jQuery, y llamar al método autocomplete de este elemento, pasando como parámetro un objeto con un campo source, que es el que indicará al plugin la fuente de datos a utilizar para el autocompletado.

<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/>
  
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
	var animales = ["Ardilla roja", "Gato", "Gorila occidental",
	  "León", "Oso pardo", "Perro", "Tigre de Bengala"];
	
	$("#animal").autocomplete({
	  source: animales
	});
});
</script>
</head>

<body>
<input type="text" id="animal"/>
</body>
</html>

La fuente, además de un array de strings, como en el ejemplo anterior, también puede ser

  • un array de objetos, con propiedades label (el texto que se mostrará como sugerencia) y value (el texto que se introducirá en la caja de texto al hacer clic sobre esa sugerencia)
    <html>
    <head>
    <link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/>
      
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
    $(function() {
    	var animales = [
    	  {label: "Ardilla roja", value: "Sciurus vulgaris"},
    	  {label: "Gato", value: "Felis silvestris catus"},
    	  {label: "Gorila occidental", value: "Gorilla gorilla"},
    	  {label: "León", value: "Panthera leo"},
    	  {label: "Oso pardo", value: "Ursus arctos"},
    	  {label: "Perro", value: "Canis lupus familiaris"},
    	  {label: "Tigre de Bengala", value: "Panthera tigris tigris"}];
    	
    	$("#animal").autocomplete({
    	  source: animales
    	});
    });
    </script>
    </head>
    
    <body>
    <input type="text" id="animal"/>
    </body>
    </html>
  • una cadena con una URL, que deberá devolver un array de strings u objetos en formato JSON
    <?php
    if(isset($_GET['getAnimales'])) {
      $bd = new mysqli("localhost", "root", "", "animales");
      if(mysqli_connect_errno()) return;
    
      $animales = array();
      if($res = $bd->query("SELECT * FROM animales"))
        while($animal = $res->fetch_assoc())
          $animales[] = array(
            'label' => $animal['nombreComun'],
            'value' => $animal['nombreCientifico'],
            'estado' => $animal['conservacion'],
          );
      $bd->close();
      echo json_encode($animales);
      return;
    }
    ?>
    
    <html>
    <head>
    <link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/>
    
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
    $(function() {
    	$("#animal").autocomplete({
    	  source: "animales.php?getAnimales=1"
    	});
    });
    </script>
    </head>
    
    <body>
    <input type="text" id="animal"/>
    </body>
    </html>
  • o una función de callback, a la que se le pasa un objeto request (la petición) y un objeto response (la respuesta).

De entre los eventos de los que dispone el widget el que más utilizaremos, seguramente, sea select, un evento que se lanza cuando el usuario ha seleccionado uno de los resultados sugeridos, y que se utilizaría de la siguiente forma:

<?php
if(isset($_GET['getAnimales'])) {
  $bd = new mysqli("localhost", "root", "", "animales");
  if(mysqli_connect_errno()) return;

  $animales = array();
  if($res = $bd->query("SELECT * FROM animales"))
    while($animal = $res->fetch_assoc())
      $animales[] = array(
        'label' => $animal['nombreComun'],
        'value' => $animal['nombreCientifico'],
        'estado' => $animal['conservacion'],
      );
  $bd->close();
  echo json_encode($animales);
  return;
}
?>

<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#animal").autocomplete({
        source: "animales.php?getAnimales=1",
        select: function(event, ui) {
            $('#conservacion').html(ui.item.label + " (" + ui.item.value + ") " +
                "tiene un estado de conservación de: " + ui.item.estado);
        }
    });
});
</script>
</head>

<body>
<input type="text" id="animal"/>
<p id="conservacion"></p>
</body>
</html>




Comentarios
  1. Muy bueno

    Responder

  2. Me gustan este tipo de entradas, a pesar de que ya conocía la funcionalidad, es lindo ver cosas de jQuery y Php.

    Llegara el día que veamos el jQuery Para Todos?.-

    Responder

    • Si hay tiempo, ganas, y a la gente le interesa, es posible 🙂

      Responder

      • Yo sin dudas lo bajaría, imprimiría y encuadernaría como el de Python :’).-

        Responder

        • gebi

          Yo haría lo mismo que tú. Muchas gracias por el material de este post, en lo personal lo hice con los consejos de un libro que me baje por ahí, pero enserio que es muy complejo, aunque vale la pena para aprenderte algunas cosas. Gracias otra vez.

          Responder

  3. Muy buen aporte, podrias dejar la fuente para descargarselo

    Responder

  4. Listo amigo ya solucione desde la pagina principal de http://jqueryui.com/ me descargue los temas que necesitaba y el pluguin de jquery adecuado, un millon

    Responder

  5. the_maco

    Gran aporte 😀 hace poco comence a utilizar jQuery pero no sabia de esta util herramienta, gracias.

    Responder

  6. Una pregunta!, esta nueva funcion de jquery acepta peticiones por el metodo post??? si existe por favor diganmde necesito su ayuda

    Responder

  7. rapido, senllito y facil de entender….
    buen codigo para jquery.

    saludos

    Responder

  8. jigsaw

    Excelente post! , sencillo y concreto, habra algun tutorial de manejo de prototype¡??
    o mejor aun.. esta funicionalidad de auto_complete de jquery dentro del framework cakephp?

    Responder

  9. Cristian

    Hola como te va
    Vos sabes que me funciona bien el archivo php pero el script no me autocompleta. Por casualidad no me podrías enviar el codigo en un zip por favor.
    Mil gracias,
    Cristian

    Responder

  10. Yo agregaría:

    $.post(
    “/obtenerParecidos”,
    {q: $(“#txt_busca”).val()},
    function(obj){
    $(“#txt_busca”).autocomplete( source: obj);
    }
    );

    Código dentro de una función que se active al cambiar el texto de “txt_busca”.

    Responder

  11. Cristian

    Omar:

    Vos sabes que probe tu codigo y no me funciona, me asegure que el codigo jquery no de errores y que el archivo que esta dentro del directirio “obtenerParecidos” (index.php) devuleva datos y que esta siendo llamado cada vez que tecleo en la caja, pero no me aparece el autocomplete ¿No tendras el ejemplo completo para poder descargarlo por favor?
    gracias

    Responder

  12. luis

    es interesante. Bueno quisiera consultarte como hago para mostrar un scroll dentro de ese autocomplete yo lo hice casi similar. Aqui te dejo el codigo hice, ademas estoy usando codeigniter. gracias

    jQuery.ajax({
    type: “GET”,
    url: “index.php/gestionmiembro/invitador/”,
    success : function(data) {

    jQuery(“#invitador”).autocomplete({source:data.split(“\n”)});
    }
    });

    Responder

  13. jose

    hola no me funciona bien el autocomplete cuando lo recupero de una ruta externa. cuando digito alguna letra en la caja de texto siempre me muestra todos los resultados sin ser cambiado

    Responder

  14. jose

    En este momento estoy tratando de usar el autocomplete de JQuery para un campo cuyos datos deben venir de una BD, ya probe el ejemplo con valores fijos (de un array en JS) y me funciona sin problema, más al hacerlo con datos remotos de la una BD no me funciona, ya revise el modelo y la consulta se está ejecutando y trayendo los datos sin problema en formato JSON, este es mi código JS:

    $(function() {
    $( “#autocompletarCiudad” ).autocomplete({
    source: ‘?controlador=FormularioClientesCuentasCorrientes& accion=listarCiudadesAutocompletar’,
    minLength: 1
    });
    });

    y estos son los datos que me retorna el modelo (una vez les he aplicado json_encode ):

    [{“label”:”5″,”value”:”Buenaventura”},{“label”:”9″, “value”:”Caicedonia”},{“label”:”8″,”value”:”Popaya n”}]

    No me está retornando errores y de hecho la petición GET se está haciendo, más no se autocompleta el campo, por lo cual les pido que si alguno de ustedes nota el error ó inconsistencia en el código me dé sus comentarios, ya que he revisado bastante esto y no doy con la respuesta.

    De antemano mucha gracias por su ayuda.

    Responder

  15. jose luis

    Que impresionante que es jQuery

    Responder

  16. Jhon

    Interesante,buen post.

    Responder

  17. Gracias maestro, muy bien esplicado.

    Responder

  18. Ainhi

    Buenos días,
    Estoy teniendo problemas a la hora de personalizar comportamientos del autocomplete.Tengo un autocompletado categorizado por fabricantes, subgrupos y productos.
    Cuando selecciono un fabricante modifico la url del source perfectamente, pero hasta que el usuario teclea algo no se lleva a cabo esa actualización. Sería posible hacerlo manualmente en la función Select?
    muchas gracias

    Responder

  19. tavo

    buenisimo el aporte,bastante claro

    Responder

  20. Joran

    Como hago para dejar un elemento de la lista preestablecido?

    Responder

  21. Ale

    Tengo que bajar algun archivo para hacerlo funcionar?

    Responder

  22. Wezzi

    Buenas. Gracias por el aporte, pero me gustaría consultar una duda. El autocompletado busca sin respetar la posición de la letra del input, esto es, que poniendo “ca” sugeriría “casa” y “butaca”, cuando sólo debería devolver “casa” si respetara la posición. ¿Alguna sugerencia de cómo hacerlo? He mirado en las opciones del autocomplete en la web de jquery, pero no encuentro nada por el estilo.

    Saludos.-

    Responder

  23. gf

    En
    https://github.com/gtryonp/tryonline
    hay un autocomplete que usa una interfase de una linea. Practico para interfases minimalistas.

    Responder

  24. SINHEX

    Hola, me interesa hacerlo pero obteniendo los datos de una base de datos, alguna ayuda?

    Responder

Deja un comentario