Select2 Demo

by cphelefu

HTML

<link rel="stylesheet" href="http://ecos.fws.gov/js/bootstrap-2.0.3/css/bootstrap.css">
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<input type='hidden' name='input' id='myTest1' style="width:300px;"/>

JavaScript

$(document).ready(function() {
    function format(item) { return item.FullName; }

    $("#myTest1").select2({
        data: {
            results: [
                { MemberId: 1, FullName: "User1 Last" },
                { MemberId: 2, FullName: "User2 Last" },
                { MemberId: 3, FullName: "User3 Last" },
                { MemberId: 4, FullName: "User4 Last" }
            ], text: 'FullName'
        },
        id: function (obj) { return '#myTest1'; },
        formatSelection: format,
        maximumSelectionSize: 3,
        initSelection: function (element, callback) {
            console.log("init selection", element);
            var data = [];
            $(element.val().split(",")).each(function () {
                data.push({id: this, text: this});
            });
            callback(data);
        },
        //minimumInputLength: 1,
        multiple: true,
        formatResult: format
    });

});