¿Buscas la forma de que tus búsquedas se autocompleten automáticamente?, ¿Te gusta la forma en que lo hace Facebook?, si la respuesta a alguna de estas preguntas es afirmativa, este tutorial te puede resultar de gran interés.
Los chicos de Devthought se han encargado de imitar el comportamiento de los buscadores de Facebook, los cuales autocompletan las búsquedas que realizamos según los caracteres introducidos.
Podéis ver la demostración del script, descargarlo o seguir leyendo el artículo para conocerlo un poco más a fondo.
1. Introducción
El plug-in funciona gracias a Mootools. Trabaja almacenando en caché todos los resultados de una solicitud JSON y enviándolo al objeto autocompletar. Cuando un elemento se añade desaparece automáticamente de la búsqueda y al eliminarlo volverá a estar disponible.
2. ¿Cómo implementarlo?
Como viene siendo costumbre, tendremos que añadir la última versión de Mootools, la hoja de estilos test.css y el plug-in textboxlist.compressed.js, entre las etiquetas head.
Código JavaScript
<link rel="stylesheet" href="test.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" /> <script src="mootools-beta-1.2b1.js" type="text/javascript" charset="utf-8"></script> <script src="textboxlist.compressed.js" type="text/javascript" charset="utf-8"></script> <script src="test.js" type="text/javascript" charset="utf-8"></script>
Ahora llamaremos a la función y añadiremos tantas posibilidades como queramos mostrar en las búsquedas:
Código HTML
<label>FacebookList input</label> <input type="text" value="" id="facebook-demo" /> <div id="facebook-auto"> <div class="default">Type the name of an argentine writer you like</div> <ul class="feed"> <li>Jorge Luis Borges</li> <li>Julio Cortazar</li> </ul> </div>
Como se puede ver a primera vista, las opciones disponibles se pondrán en forma de lista, entre las etiquetas li de nuestro código HTML.
Enlace: TextboxList meets Autocompletion