DesarrolloWeb.com > Manuales > Manual de jQueryUI

Plugin autocomplete de jQuery UI

08 de December de 2010

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (2)

Como usar el plugin jQuery UI autocomplete, para crear un campo de texto que ofrece sugerencias para autocompletar la información escrita, según se escribe.

Por Miguel Angel Alvarez

Seguir a alvarezmiguelan

En el presente artículo vamos a mostrar un modo de crear un campo de texto con función de autocompletar, una utilidad dinámica muy de agradecer, que ayudará a los usuarios a teclear menos y escribir información más precisa. Sin duda habréis visto en innumerables ocasiones esa utilidad, en diversos sitios. Por ejemplo, Google Maps tiene un campo autocompletar que se activa para sugerirnos direcciones del mundo a medida que vamos escribiendo cualquier cosa.

A continuación mostraremos cómo utilizar un script ya creado para hacer dicho campo de autocompletar. Es decir, no explicaremos cómo hacerlo por nosotros mismos, sino cómo utilizar un desarrollo ya listo, que nos ahorrará mucho trabajo. Utilizaremos el plugin autocomplete de las librerías jQuery UI, que la verdad es un componente bastante potente que podremos configurar perfectamente para adaptarlo a cualquier necesidad.

Nota: Si deseas aprender jQuery UI te recomendamos que estudies previamente un poco de jQuery y que leas la serie de artículos sobre los primeros pasos con jQuery UI.

Ahora veremos como en una corta serie de pasos elementales, podremos tener nuestro propio componente de autocompletado.

Paso 1: incluir las librerías jQuery y jQuery UI

Como ya se comentó en el artículo Pasos para utilizar jQuery UI, parte 2, primero tenemos que incluir los scripts de jQuery y jQuery UI, así como la hoja de estilos de el tema de personalización del componente que estemos utilizando.

Todos los scripts y la hoja de estilos los obtenemos cuando descargamos nuestro paquete de jQuery UI. El código para incluirlo todo será algo como esto.

Nota: Lógicamente, tendrás que comprobar que las rutas a los archivos están correctas, tal como tengas la estructura de directorios en tu web. Además, muy probablemente habrás descargado jQuery UI con otro tema CSS, por lo que la ruta al archivo CSS seguramente tendrás que cambiarla.

Paso 2: colocar un campo de texto normal

En algún lugar del cuerpo de tu página tendrás que colocar una etiqueta INPUT para crear un campo de texto, que luego convertiremos en un componente autocompletar.

El identificador (atributo ID) será el que tú desees. Simplemente acuérdate de él, porque luego tendrás que utilizarlo en tu script.

Paso 3: generar un array con las opciones de autocompletado

Ahora vamos a crear un array Javascript con diversos valores, que utilizaremos en el campo de autocompletar.

Este array se utiliza cuando queremos que las opciones para autocompletado del campo estén en "local", es decir, escritas en la propia página que tiene el script. Sin embargo, esta es sólo una opción de configuración y la hemos elegido ahora por ser la más simple. Más adelante explicaremos cómo obtener esas opciones de forma remota.

Vamos a crear en este caso un array con las provincias de España, que tendría esta forma.

var arrayValoresAutocompletar = [
   "Álava",
   "Albacete",
   "Alicante",
   "..."
];

Paso 4: invocar al plugin autocomplete

En este paso hacemos la tarea de convertir el campo de texto normal en un campo de tipo autocomplete, que sugiera opciones según se escribe texto en él. Veremos lo sencillo que es, gracias a jQuery UI.

$("#autoc1").autocomplete({
source: arrayValoresAutocompletar
})

Con esta sentencia invocamos al plugin sobre el campo de texto, al que hemos accedido por su identificador. Además, debemos indicar como opción en el plugin el lugar desde donde se deben obtener las distintas opciones para autocompletar.

Ejemplo puesto en marcha

Eso es todo! Quizás te sorprenda, como a mí, lo fácil que ha sido poner este plugin en marcha.

Si lo deseas, puedes ver el campo autocompletar que hemos creado. Para ver la funcionalidad en marcha debes escribir cualquier letra en el campo o un conjunto de letras como "alm" y te mostrará diferentes sugerencias de provincias de España para que elijas la que desees.

Todo el código completo para el campo autocompletar

Ahora puedes ver el código completo de esta página realizada para poner en marcha el plugin autocomplete.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Probando autocomplete</title>
   <link type="text/css" href="css/ui-darkness/jquery-ui-1.8.6.custom.css" rel="Stylesheet" />
   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         var arrayValoresAutocompletar = [
            "Álava",
            "Albacete",
            "Alicante",
            "Almería",
            "Asturias",
            "Avila",
            "Badajoz",
            "Barcelona",
            "Burgos",
            "Cáceres",
            "Cádiz",
            "Cantabria",
            "Castellón",
            "Ceuta",
            "Ciudad Real",
            "Córdoba",
            "Cuenca",
            "Gerona",
            "Granada",
            "Guadalajara",
            "Guipúzcoa",
            "Huelva",
            "Huesca",
            "Islas Baleares",
            "Jaén",
            "La Coruña",
            "La Rioja",
            "Las Palmas",
            "León",
            "Lérida",
            "Lugo",
            "Madrid",
            "Málaga",
            "Melilla",
            "Murcia",
            "Navarra",
            "Orense",
            "Palencia",
            "Pontevedra",
            "Salamanca",
            "Segovia",
            "Sevilla",
            "Soria",
            "Tarragona",
            "Tenerife",
            "Teruel",
            "Toledo",
            "Valencia",
            "Valladolid",
            "Vizcaya",
            "Zamora",
            "Zaragoza"
         ];
         $("#autoc1").autocomplete({
            source: arrayValoresAutocompletar
         })
      })
   </script>
</head>
<body>
<h1>Probando el plugin autocomplete de jQuery UI</h1>

   <form>
      Escribe una provincia de España: <input type="text" size="20" id="autoc1">
      <br>
      * Pon al menos una letra para que salgan opciones.
      <br>
      * Puedes escribir algo como "ma" para que salgan sugerencias como "Madrid", "Salamanca", etc.
   </form>
</body>
</html>

Este modo de trabajar con las opciones del autocomplete por medio de un array enviado al propio plugin es interesante cuando las posibilidades del campo son limitadas, pero no resulta optimo cuando las opciones que podrían colocarse son muchas, por ejemplo más de 100. En el artículo siguiente mostraremos cómo realizar este campo de autocompletado de manera que las opciones sugeridas se carguen desde un script remoto.