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>




29 comentarios en «Autocompletado con jQuery»

        1. 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.

  1. 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?

  2. 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

  3. 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».

  4. 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

  5. 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»)});
    }
    });

  6. 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

  7. 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.

  8. 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

  9. 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 a tavo Cancelar respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.