Select2 Demo

HTML

<link rel="stylesheet" href="http://ecos.fws.gov/js/bootstrap-2.0.3/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.js"></script>
<script>
    var tags = [{
        "id": 1354,
            "text": "north",

            "restricted": false
    }, {
        "id": 1355,
            "text": "south",

            "restricted": false
    }, {
        "id": 1356,
            "text": "east",

            "restricted": false
    }, {
        "id": 1357,
            "text": "west",

            "restricted": false
    }];
</script>
<p>tags:
    <input type="text" id="mytags" value="1355" style="width:80%" />
</p>
<p>Selected Options: <span id="selectedText"></span>

</p>
<p>Debug: <span id="debug"></span>

</p>

CSS

p {
    margin: 1em 0;
}

JavaScript

function findWithAttr(array, attr, value) {
    for (var i = 0; i < array.length; i += 1) {
        if (array[i][attr] == value) {
            return array[i];
        }
    }
}



$(document).ready(function () {


    function format(item) {
        return item.text;
    }




    $('#mytags').select2({
        placeholder: 'Search',
        allowClear: true,
        minimumInputLength: 2,
        multiple: true,
        //tags: tags,
        tokenSeparators: [','],

        data: {
            results: tags,
            text: 'text'
        },
        initSelection: function (element, callback) {


            var data = [];
            $($('#mytags').val().split(",")).each(function (i) {


                var o = findWithAttr(tags, 'id', this);

                if (o) {
                    data.push({
                        id: o.id,
                        text: o.text
                    });
                } else {
                    console.log("findWithAttr returned none; likely invalid id");
                }
            });
            console.log("data = " + JSON.stringify(data));
            callback(data);
        },
        createSearchChoice: function (term, data) {
            console.log("create");
            if ($(data).filter(function () {
                return this.text.localeCompare(term) === 0;
            }).length === 0) {
                // call $.post() to add this term to the server, receive back id
                // return {id:id, text:term}
                // or detect this shiftiness and do it below in the on-change

                return {
                    id: -1,
                    text: term
                };
            }
        },

        formatSelection: format,
        formatResult: format
    });



    $('#mytags').on("change", function (e) {
        console.log("change " + JSON.stringify({
            val: e.val,
            added: e.added,
            removed: e.removed
        }));

        if (e.added) {
   ...