jQuery List Builder Demo

jQuery List Builder uses the jQuery UI autocomplete to convert a basic input into an email client like "To" field with autocompletion.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<script src="https://raw.github.com/th3uiguy/jquery-listbuilder/master/jquery.listBuilder.js"></script>
<link rel="stylesheet" href="https://raw.github.com/th3uiguy/jquery-listbuilder/master/jquery.listBuilder.css">
<h1>jQuery List Builder Demo</h1>
<p>
    In this example "Santa" is locked in the <em>To</em> field, but all other persons entered in the <em>To</em> field will be addable/removable. The <code>maxItems</code> has been set to <code>4</code>. To see the plug-in in action, try adding one of 
    <a href="#" onclick="window.open('http://en.wikipedia.org/wiki/Santa_Claus%27s_reindeer')" title="Dasher, Dancer, Prancer, Vixen, Comet, Cupid, Donner, Blitzen, Rudolph">Santa's reindeer</a>.
</p>
<br />
<form action="javascript:void(0)">
    <fieldset>
        <div>
            <label for="to">To:</label>
            <input type="text" id="to" name="to" value="" />
        </div> 
        <div>
            <label for="subject">Subject:</label>
            <input type="text" id="subject" name="subject" value="I've been good!" />
        </div>
        <div>
            <label for="message">Message:</label>
            <textarea id="message" name="message">Dear Santa and Reindeer, 

Please don't forget me this year and watch out for the snow storms!

Thanks!
            </textarea>
        </div>
        <div style="text-align: right">
            <button type="reset">Cancel</button>
            <button type="submit">Send</button>
        </div>
    </fieldset>
</form>

CSS

body{ font-family: Arial, Verdana, sans-serif; color:#555; }
fieldset{width:500px; background-color: #f5f5f5; border: 1px solid #ccc; margin:0 auto; padding:0.5em 0.8em}
fieldset div{margin: 5px 0; clear: both;}
fieldset div.listBuilder{clear:none;margin-left:100px;}
fieldset label{float: left;width:100px;}
fieldset input, fieldset textarea{border: 1px solid #ccc;font-size: 1em;font-family: Arial, Verdana, sans-serif;padding: 0.2em 0.3em;width: 387px;}
fieldset div.listBuilder input{width:200px;}
#message{height:200px;width: 487px;}


/* listBuilder.css */
.listBuilder{
    border: 1px solid #ccc;
    background-color: #fff;
    padding:0.2em 0.3em;
    cursor:text;
}
.listBuilder ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.listBuilder a.add{
    float: right;
    padding:2px 3px;
}
.listBuilder ul li{
    display: inline;
    padding: 0;
    margin: 0;
}
.listBuilder ul a{
    display: inline-block;
    border:1px solid #aaf;
    background:#ddf;
    color:#333;
    padding:0.1em 0.3em;
    margin: 0.1em 0.2em;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-decoration: none;
}
.listBuilder ul a.locked{
    background: none;
    border: none;
    padding-left:0.1em;
    padding-right:0.1em;
}
.listBuilder .invalid{
    background: #FCE094;
    border-color: #DEA94F;
}
.listBuilder .ui-icon{
    margin-top: 2px;
}
.listBuilder ul a.invalid .ui-icon-alert{
    float: left;
}
.listBuilder .ui-icon-closethick{
    float:right;
}
.listBuilder ul a.lb-hover{
    border-color:#d00;
    background: #d88;
    color:#fff;
}
.listBuilder ul a.lb-hover{
    border-color:#d00;
    background: #d66;
    color:#fff;
}
.listBuilder .active{
    background: #66b;
    border-color: #009;
    color:#fff;
}
.listBuilder input.ui-autocomplete-input{
    border: none;
    color:#333;
    background: none;
    font-size:1em;
    outline: none;
    padding:0.2em 0.5em;
    margin:0.1em 0.2em;
    z-index: 900;
   ...

JavaScript

$(function(){
    $('#to').listBuilder({
        items: [{label:"Santa",locked:true}, {label:"Dasher", value:"deer1"}],
        maxItems: 4,
        onMaxReached: function(){
            alert('Sorry this message can only be sent to 4 people!');
        },
        autocompleteOptions: { //see: http://jqueryui.com/demos/autocomplete/#options for more info
            source: [
                {label:"Dasher", value:"deer1"},
                {label:"Dancer", value:"deer2"},
                {label:"Prancer", value:"deer3"},
                {label:"Vixen", value:"deer4"},
                {label:"Comet", value:"deer5"},
                {label:"Cupid", value:"deer6"},
                {label:"Donner", value:"deer7"},
                {label:"Blitzen", value:"deer8"},
                {label:"Rudolph", value:"deer9"},
                {label:"Elf", value:"elf"}
            ]
        }
    });
    $('#to').click();

    $('form button').button();
    $('form').submit(function(){
        var data = $(this).serialize();
        alert(data);
    });
});