TextboxList: Fancy Facebook-Like dynamic inputs!
Check out a demo of TextboxList before reading!
While working on my big and exciting new project, I decided to include an input that resembles the famous Apple Mail to: textfield. I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)
I created my own, MooTools 1.2 compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.
Anatomy of the control
As usual, I try to come up with a semantic, unobstrusive approach. I start with the CSS and the markup that will be my end result.
I want to go from something like this:
<li id="facebook-list" class="input-text"><label>FacebookList input</label><input type="text" value="" id="input-demo2" /></li>
to something like this (only one possible scenario, naturally)
<li id="facebook-list" class="input-text"><label>FacebookList input</label><ul class="holder"><li class="bit-input"><input type="text" value="" class="smallinput" /></li><li class="bit-box">Jorge Luis Borges <a href="#" class="closebutton"></a></li><li class="bit-input"><input type="text" value="" class="smallinput" /></li><li class="bit-box">Julio Cortazar <a href="#" class="closebutton"></a></li><li class="bit-input"><input type="text" value="" class="maininput" /></li></ul></li>
Basically, it’s a group of pieces (that I’ll call bits), that can be either a box or an input (small, except for the main one). The user is able to move around between the bits by using his keyboard or his mouse.
Javascript
As far as the javascript goes, I try to first think about reusable code (usually classes) that I may use. I thus first coded the class that adds resizing capabilities to the small fields as the user types, and a small utility method to find the caret position.
The only challenges I found was handling the complex events while keeping everything crossbrowser. Again, none of this would have been possible if it wasn’t for MooTools (1.2).
Using it
All you have to do is:
Click here to see Javascript code
new TextboxList('input-demo');
Where input-demo is the id of the desired input to replace
The constructor can take these options:
- onInputFocus (event, fired when an input gets focus)
- onInputBlur (event, fired when an input loses focus)
- onBoxFocus (event, fired when a box gets focus)
- onBoxBlur (event, fired when a box loses focus)
- onBoxDispose (event, fired when a box is removed)
- resizable (option, hash, passed to ResizableTextbox constructor)
- className (option, string, prefix of the classnames of the generated objects)
- extrainputs (option, boolean, adds small inputs between boxes if true)
- startinput (option, boolean, adds a small input before the first box if true)
- hideempty (option, boolean, hides the small inputs by default)
Extending it
One of the my favorite features of MooTools is how easily you can create and extend classes. It makes you feel in a truly Object-Oriented environment, overcoming all Javascript limitations and complexities to handle functionalities like this by default.
I decided that, for the sake of simplicity, the class would not incorporate stuff like boxes removal through clicks, or even autocompletion (like Facebook does), since the scenarios to use this control are multiple and diverse.
Here is an example of how easily you can add the small remove links next to the name (and some CSS, of course)
Click here to see Javascript code
var FacebookList = new Class({Extends: TextboxList,createBox: function(text, options) {var li = arguments.callee.parent(text, options);li.addEvents({'mouseenter': function() { this.addClass('bit-hover') },'mouseleave': function() { this.removeClass('bit-hover') }});li.adopt(new Element('a', {'href': '#','class': 'closebutton','events': {'click': function(e) {new Event(e).stop();if(! this.current) this.focus(this.maininput);this.dispose(li);}.bind(this)}}));return li;}});
Changelog
- 0.1: initial release
- 0.2: code cleanup, small blur/focus fixes
Download
Click here to download a zip file containing examples, TextboxList documented (8kb) and compressed (5kb)
New! TextboxList with autocompletion
Tags: on January 11th, 2008
January 11th, 2008 at 7:55 pm
Nice script ! Congrats’ !
January 11th, 2008 at 10:36 pm
Sweet!!!
January 12th, 2008 at 6:48 pm
[...] my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to [...]
January 13th, 2008 at 11:33 pm
Great code for the great Mootools library
January 14th, 2008 at 4:21 am
[...] salió a la luz “TextboxList: Fancy Facebook-Like dynamic inputs!” se trata de una forma bastante “original” de mostrar / editar listas. No [...]
January 17th, 2008 at 7:28 am
Fantastic!! mootools too I love it
January 17th, 2008 at 1:23 pm
Any chance I could get a port of the script for Moo 1.1, the project I am currently working on was going to use some 1.2 scripts but the compatibility package on Moo’s site wasn’t compatibilizing
the way it should in many cases. Pleaseeeee!!!!
Thanks a mil!
January 17th, 2008 at 1:27 pm
@Daniel
I don’t plan on supporting 1.11. However, it shouldn’t be hard to do it yourself.
January 18th, 2008 at 6:17 pm
He llegado gracias al blog de Anieto2k…Me ha parecido un gran trabajo el tuyo, pero para ser la primera vez que me acerco al mundo mootols, me pierdo bastante a la hora de hacer una cosa muy basica para poder importar tu script a mi herramienta…
¿Crees sencillo que pudiera implementar un autocomplete dinamico haciendo llamadas al servidor si el patron de busqueda no aparece en el primer fichero cargado?
A la hora de hacer submit del formulario, bajo que “name” aparecen los elementos que se añaden? Supongo que existe la manera de poder pasar el contenido el “text” de los nodos por debajo de class=”feed” al text cuyo id es “facebook-demo” , pero no consigo ver el modo…
Saludos y gracias de todos modos por tu esfuerzo
January 21st, 2008 at 7:32 pm
Hi there,
json.html is a static file and is giving me a 405 error under IIS 5.x as the POST method is not allowed for text/html by default.
If I change the extension to json.asp and alter the file name to json.asp in test.js it works OK.
…. is this an acceptable workaround or should I reconfigure IIS ?
{ Thanks Guillermo for a great library ]
January 21st, 2008 at 9:53 pm
Matt
Whatever URL data comes from is fine! json.html is only intended as an example.
February 6th, 2008 at 7:42 am
[...] Auto uzupełnianie listy w polu tekstowym (mootools) [...]
February 8th, 2008 at 11:54 am
Right on! And good job keeping the code clean too.
February 11th, 2008 at 4:26 pm
[...] everybody, after coming across Guillermo Rauch’s script, I knew i had to port it into my favorite library, Prototype. In this page you will find the [...]
February 17th, 2008 at 12:31 pm
Great work, what if I want to make it with single select?
February 20th, 2008 at 6:45 pm
Greetings, I wrote a class to extend the TextBoxList class, and I’m in need to run some function onBoxDispose. I uncommented the onBoxDispose: $empty, option in the TextBoxList class and wrote a function in my new class onBoxDispose: function(){//mystuff}, but for some reasons, it’s not getting run when the box is disposed. what am I missing here? Thanks.
February 28th, 2008 at 10:12 am
Guillermo, any word of advice on the question above?
March 3rd, 2008 at 10:47 am
[...] (more…) [...]
April 11th, 2008 at 11:49 pm
the TextboxList is very cool~!
May 12th, 2008 at 7:48 pm
tested and works a treat! thanks
June 30th, 2008 at 11:43 am
Really cool! It does however throw some errors in IE7 when testing the demo, some small try catch would solve it I know, just wanted to mention it. As Im sitting on a developer machine with script debugger on the forced error popup really gets you,
Great work!
June 30th, 2008 at 5:18 pm
[...] http://devthought.com/textboxlist-fancy-facebook-like-dynamic-inputs/ bzw. http://devthought.com/textboxlist-meets-autocompletion/ Lizenz: MIT [...]
July 22nd, 2008 at 9:19 am
[...] Devthought - Guillermo Rauch’s Blog » TextboxList: Fancy Facebook-Like dynamic inputs! [...]