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:
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:
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:
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:
4- Para finalizar en nuestro HTML creamos un <div> que contendrá nuestro input que será quien implemente el autocompletar:
Luego de la implementación debería quedar algo como esto:
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.
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:
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>
