Auto completar 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:

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.




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)




una cadena con una URL, que deberá devolver un array de strings u objetos en formato JSON

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;
}
?>  




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:

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;
}
?>  




Related Posts Plugin for WordPress, Blogger...

publicidad

1 Comment

Deja una respuesta

Tu dirección de correo electrónico no será publicada.