Cargando



Autocompletar con jQuery UI

La funcionalidad de autocompletar es un mecanismo que se usa frecuentemente en sitios web modernos para proporcionarle al usuario una lista de sugerencias dependiendo de la palabra que escriba en el campo de texto. Esta funcionalidad también previene que el usuario ingrese un valor incorrecto o algo no requerido en ese campo.


jul 07 2013 19:35
jul 07 2013 19:41
Existen muchos plugins en internet que permiten agregar esta funcionalidad en nuestro site, sin embargo los mismos son desarrollados bajo un esquema de programación que quizá desconocemos y luego su modificación e implemetación suele ser algo tediosa y complicada. Pero no todo está perdido ya que jQuery y su extensión de librerías jQuery UI nos traen algunos métodos para implementar la funcionalidad de autocompletar en nuestro site sin muchos dolores de cabeza.

Antes de pasar con un ejemplo veamos el método autocomplete y su funcionamiento.

El metodo autocomplete()

El metodo autocomplete puede ser usado de dos formas:

$(selector, context).autocomplete (options)
$(selector, context).autocomplete ("action", params)

Este metodo declara que un <input> HTML debe ser gestionado como un campo que despliega una lista de sugerencias, las opciones especifican el comportamiento de esta lista al momento que el usuario empieza a escribir en el campo.

De los caracteres ingresados en el campo de texto, se realiza una comparación con los valores contenidos en las opciones del source.

Veamos un ejemplo práctico para verlo mejor:

1- Primero incluimos los archivos necesarios:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

2- Creamos una variable que contenga las palabras que serán el listado de sugerencias disponibles para el autocompletar, el listado de sugerencias también puede ser alimentado desde un JSON e incluso desde un XML, inclusive extendiendo un poco la funcionalidad añadiendo ajax, pero en este ejemplo usaremos una variable para no complicar las cosas:

var availableTags = [
	 "ActionScript",
	 "AppleScript",
	 "Asp",
	 "BASIC",
	 "C",
	 "C++",
	 "Clojure",
	 "COBOL",
	 "ColdFusion",
	 "Erlang",
	 "Fortran",
	 "Groovy",
	 "Haskell",
	 "Java",
	 "Javascript",
	 "Lisp",
	 "Perl",
	 "PHP",
	 "Python",
	 "Ruby",
	 "Scala",
	 "Scheme"
];

3- Invocamos el método, le asociamos el selector y le damos como opción el parámetro source indicandole de donde sacará la lista de sugerencias:

$( "#tags" ).autocomplete({
	 source: availableTags
});

4- Para finalizar en nuestro HTML creamos un <div> que contendrá nuestro input que será quien implemente el autocompletar:

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>

Luego de la implementación debería quedar algo como esto:


Autocompletar-jquery.jpg


Por último les voy a dejar el código completo para que lo puedan probar por ustedes mismos, sin olvidar que podemos llenar nuestra lista de sugerencias desde varias fuentes válidas y aplicando diferentes opciones y eventos que aumentarán la funcionalidad de nuestro componente.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
	 "ActionScript",
	 "AppleScript",
	 "Asp",
	 "BASIC",
	 "C",
	 "C++",
	 "Clojure",
	 "COBOL",
	 "ColdFusion",
	 "Erlang",
	 "Fortran",
	 "Groovy",
	 "Haskell",
	 "Java",
	 "Javascript",
	 "Lisp",
	 "Perl",
	 "PHP",
	 "Python",
	 "Ruby",
	 "Scala",
	 "Scheme"
];
$( "#tags" ).autocomplete({
	 source: availableTags
});
});
</script>
</head>
<body>

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>


</body>
</html>

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X