TextboxList for MooTools and jQuery by Guillermo Rauch

By  on  
MooTools jQuery TextboxList

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...)

MooTools jQuery TextboxList

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!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...

Discussion

  1. Very nice! Thank you!

  2. Loved it..I was searching for this one! thanks

  3. Totally have a use for this in the coming months. I am revamping my custom CMS to run server wide (think whm hosting resellers). Anyways is going to be awesome (think word press). Anyways this would be perfect for the Keyword meta tag… have it grab the existing content from the page, strip tags and group by words removing the monst common words (the, is, it, etc…)

    Gonna be sweet, thx!

  4. Alex

    There’s something like this in zootool.com, a mootools based url bookmark service, when you try to save a new item.

  5. Been looking at this for a few months. Really great work. I found this when I was hoping to make something similar for bildr.

    Will definitely be using this guy.

  6. Nice! I’m sure I’ll find some application into some websites… somehow, somewhere ~ ~ ~

    ;)

  7. It would be nice to be able to clear the box. Here is a function to do that

        /**
         * Clear the box and return all the values that where cleared
         */
        var clear = function() {
            element.val('')
            var values = [];
            list.children().each(function(){
    			var bit = getBit(this);
    			if (!bit.is('editable')) values.push(bit.remove());
    		});
           return values;
        }
    
    • vincent

      Dear Mark,

      Where should i put this piece of code?
      Thanks in advance.

    • See the updated code here

      https://gist.github.com/944923

      There are two new features
      1. Clear function
      2. Optional dropDownImage option for the autocomplete so you can have a drop down that shows all items. There is a bug in it though where the box has to be focused first, can’t figure that one out yet, maybe David Walsh can take a look and add the missing magic…

  8. rameez

    But how you retrieve the value of textboxlist?

  9. Michael

    I like to add also new phrases with this Box and it works nice but now I need that every single word is
    shown as own after an whitespace. Ex. type in “Zend Frameworks” shows not “Zend Framework”
    but “Zend” and “Framework”. At this time it is shown as on input but after post it is a splittet like the form I need. So can this be shown in the input field?
    (Sorry for my english it’s not my major language)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!