Plugin autocomplete de jQuery UI

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

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

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.

<input type="text" size="20" id="autoc1">

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

oscar

06/6/2011
Como ponerlo con errores
Por ejemplo nos muestra bien losa datos ke existen,

pero no marca o muestra ningun error si ingresamos letras ke no existen

Alex Caro

15/5/2012
Como se cambia?
Muchas gracias, muy util, pero no encuentro la linea dentro del css para cambiar los colores. Agradeceria me la indiquen en donde queda.

belenxi

03/4/2013
Generar el source dinámicamente con datos de BD
Genial chicos, mil gracias :-)))

Ahora se me ocurre una pregunta. Si el array de provincias lo quisiera sacar de una tabla "Provincias" que tuviera en mi BD...

Usando el framework CodeIgniter, simplemente pondría el nombre de la función del controlador que me devuelve la consulta a la BD en el campo "source" del autocomplete. Y en esa función del controlador, crearía un JSON con el array para devolverlo al JQuery.

Pero tengo un problema, y es que no se me actualiza la lista de provincias tal y como se actualiza con un array estático. ¿Hay algo extra que habría que hacer? ¡Pensaba que la misma función "autocomplete" de JQuery funcionaría igual de dinámica sin importar la fuente de los datos!

¿Se os ocurre por qué puede pasar?

LearningTools

08/5/2013
con PHp y mysql
Hola me gustaria saber, de que manera puedo implementar este plugin con la tecnologia de php y sacando los resultados desde una Bd como mysql, un saludo que esten bien;

omar

13/11/2016
validar que solo eliga uno de la lista
En primera estoy muy agradecido con todos los tutoriales, eres muy bueno explicando. Y bueno soy una de esas personas que supongo tu no te das cuenta pero seguido lee tus códigos.

La pregunta es como hacer para que el usuario solo elija una opción sugerida y no escriba una que no este (el usuario va escribiendo y le van saliendo las opciones, si no la encuentra el borra y escribe la palabra "otro", OJO al empezar a escribir también le sale la sugerencia que dice otro. lo que no quiero es que el usuario vaya escribiendo y si no la encuentra deje escrita en el formularia una opción que no está. Ellos tienen un campo mas para que puedan escribir la nueva sugerencia y entonces yo despues valide ese dato y lo agregue a la bd). A lo mejor me dijas que con html y un select, pero como mi arreglo es de aproximadamente 2000 sugerencias, lo mas factible para mi es con un arreglo en mysql, php y jquery.
Te agradecería que me ayudes agregar aquella línea que necesito. De antemano muchas gracias por tu trabajo.