stylish TextboxList from Mootool

Here you can see it.


Enter tags (with commas)

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

The HTML
Enter tags (with commas)
<div style="width: 500px;">
<input class="input" id="myListBox1" name="myListBox1" type="text" value="" /></div>
<div class="note">
Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate</div>

The CSS

<style type="text/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('http://davidwalsh.name/dw-content/TextboxList0.5/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; }

</style>

The JAVASCRIPT

<script>

// With custom adding keys

 window.addEvent('domready',function() {

  var myList = new TextboxList('myListBox',{

   bitsOptions:{

    editable:{

     addKeys: 188

    }

   }

  });

  myList.add('MooTools').add('FTW');

 })

</script>

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.