MagicSuggest selectionRenderer Advanced

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//nwica.technotarek.com/inc/magic-suggest/magicsuggest-1.2.4-min.css">
<script src="//nwica.technotarek.com/inc/magic-suggest/magicsuggest-1.2.4-min.js"></script>
<div class="container">
    <div class="row">
        <div class="span12">
            <h4>Characters</h4>
            <div id="group-registrants"></div>
        </div>
    </div>
</div>

CSS

.ms-sel-ctn {
    clear:left;
    float:left;
}
.ms-sel-ctn .ms-sel-item {
    background:none;
    margin:0;
    padding:0;
    position: relative;
}
.ms-sel-ctn .ms-sel-item:hover {
    background:none;
}
.ms-sel-ctn .ms-sel-item .ms-close-btn {
    position:absolute;
    top:30px;
    right:0;
}
.registrant {
    color:#161616;
}

JavaScript

var ms = $('#group-registrants').magicSuggest({
        width: 250,
       
        selectionPosition: 'bottom',
        data: [{
            id: 0,
            name: 'Tweetie'
        }, {
            id: 1,
            name: 'Sylvester'
        }, {
            id: 2,
            name: 'Garfield'
        }, {
            id: 3,
            name: 'Donald D.'
        }],
         font: 10,
        selectionRenderer: function (v) {
            return '<hr><form>' +
                '<div class="row registrant">' +
                '<div class="span2" ><h5>Character</h6><h5>' + v.name + '</h5></div>' +
                '<div class="span3"><h6>Bio</h6><textarea class="span3"></textarea></div>' +
                '<div class="span4">' +
                '<h6>Type</h6>' +
                '<label for="" class="checkbox"><input type="checkbox">Cat</label>' +
                '<label for="" class="checkbox"><input type="checkbox">Bird</label>' +
                '</div>' +
                '</div></form>';
        }
    });