Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

La mejor manera hacer autocompletado en JavaScript

La mejor manera hacer autocompletado en JavaScript 16.JUN.15

Alvaro José Rios Ch
Fundador WebBizarro

El autocompletado es una forma de ayudar a los usuarios a completar formularios con datos que tu esperas. Hay muchas formas de crear una lista con autocompletado sin embargo quiero mostrarles una que en definitiva es de las mejores.

Awesomplete es una librería súper ligera, personalizable y simple con cero dependencias, construida bajo los estándares de los browsers modernos. Puedes usar el plugin sin escribir nada de JavaScript, solo tienes que importar la librería y escribir el HTML del input.

<input class="awesomplete" data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />

También puedes usar el tag datalist para crear la lista de items.

<input class="awesomplete" list="mylist" />
<datalist id="mylist">
<option>Ada</option>
<option>Java</option>
<option>JavaScript</option>
<option>Brainfuck</option>
<option>LOLCODE</option>
<option>Node.js</option>
<option>Ruby on Rails</option>
</datalist>

Pero si necesitas personalizar el plugin puedes escribir un poco de JavaScript para usar los eventos y métodos de la librería y así crear tu propio comportamiento.

<input id="myinput" />
var input = document.getElementById("myinput");
var awesomplete = new Awesomplete(input);
/* ...more code... */
awesomplete.list = ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"];

No dejen de revisar esta librería que esta muy buena y si conocen otra compártanla con nosotros en los comentarios y si ya la han usado pues cuéntenos que tal les pareció.