David Walsh Blog

TextboxList for MooTools and jQuery by Guillermo Rauch

I’ll be honest with you: I still haven’t figured out if I like my MooTools teammate Guillermo Rauch. He’s got a lot stacked up against him. He’s from Argentina so I get IM’ed about 10 times a day about how great Lionel Messi is. He lives in California so he doesn’t have to deal with 3 months of bitter cold like I do in Madison. He even takes some of my chicks. All that said…he’s just…just…so damn smart. In the end I think some of my bitterness about Guiller is that he’s smarter than me. Better than me at MooTools, JavaScript, and even life.

Evidence of Guiller’s FTW-age can be found in his TextboxList plugin. TextboxList is a Facebook-style input list originally used by a small startup called Facebook. TextbloxList is available in both MooTools and jQuery flavors and is incredibly easy to implement. Lets walk through a simple example.

The HTML



Enter tags (with commas)

Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate

An input element. That’s it. (Editor’s note: Sometimes I don’t understand why I even put a small description of the HTML portion of my code examples. Since I follow the “JS for enhancements” philosophy, the HTML part is usually self-explanatory. ….That is all.)

The CSS


.textboxlist { font: 11px "Lucida Grande", Verdana; cursor: text; }
.textboxlist-bits { zoom: 1; overflow: hidden; margin: 0; padding: 3px 4px 0; border: 1px solid #999; *padding-bottom: 3px; }
.textboxlist-bit { list-style-type: none; float: left; display: block; padding: 0; margin: 0 5px 3px 0; cursor: default; }
.textboxlist-bit-editable { border: 1px solid #fff; }
.textboxlist-bit-editable-input { border: 0; padding: 2px 0; *padding-bottom: 0; height: 14px; font: 11px "Lucida Grande", Verdana; }
.textboxlist-bit-editable-input:focus { outline: 0; }
.textboxlist-bit-box { position: relative; line-height: 18px; padding: 0 5px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; border: 1px solid #CAD8F3; background: #DEE7F8; cursor: default; }
.textboxlist-bit-box-deletable { padding-right: 15px; }
.textboxlist-bit-box-deletebutton { position: absolute; right: 4px; top: 6px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('close.gif'); }
.textboxlist-bit-box-deletebutton:hover { border: none; background-position: 7px; text-decoration: none; }
.textboxlist-bit-box-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
.textboxlist-bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
.textboxlist-bit-box-focus .textboxlist-bit-box-deletebutton { background-position: bottom; }

TextboxList comes with its own CSS stylesheet so the CSS portion is done for you. There’s only one image required for TextboxList and it’s sprited, at that. Guiller doesn’t leave anything unoptimized. (Editor’s note: Guiller’s attention to detail both impresses me and pisses me off.)

The MooTools Usage


//create an instance 
var t2 = new TextboxList('myListElement', { 
	bitsOptions: {
		editable: {
			addKeys: 188
		}
	}
});
//add a few just for giggles
t2.add('Tag 1').add('Tag 2');

The above example is an extremely simple usage — type a name, add a comma, and you can see the effect immediately. What’s even more awesome is that the plugin is keyboard-compatible, meaning you can press the arrow keys to move “over” or between items, and even delete them. Essentially you never have to use your mouse. Also of note is that Guillermo’s TextboxList class works with a bundled autocomplete plugin so you may quickly hook TextboxList in with your database. (Editor’s note: There’s also a special autocomplete snippet for binary searches….Yeah, I know, I bet you’re probably starting to dislike him too…)

All jokes aside, Guillermo Rauch is an awesome developer. You can follow him on Twitter, poach his code on GitHub (he’s a Node.js guru as well), or check out his musings on his blog. He also has project pages created for both the MooTools and jQuery versions of TextboxList so be sure to hit those to get the details on class options, events, and usages.

If you do by chance get a moment to throw a tweet at him be sure to thank him for creating the MooTools Forge!