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 = [{
        "text": "north",
            "id": 1354,
            "restricted": false
    }, {
        "text": "south",
            "id": 1355,
            "restricted": false
    }, {
        "text": "east",
            "id": 1356,
            "restricted": false
    }, {
        "text": "west",
            "id": 1357,
            "restricted": false
    }];
</script>tags:
<input type="text" id="mytags" value="east" />

JavaScript

$(document).ready(function() {
    
    
            var data=[{id:1354,text:'north',restricted:false}, {id:1356,text:'east',restricted:false},{id:1357,text:'west',restricted:false},{id:1355,text:'south',restricted:false}];
function format(item) { return item.text; }
    
        $('#mytags').select2({
            placeholder: 'Search',
            allowClear: true,
            minimumInputLength: 2,
            multiple: true,
            tags: tags,
            tokenSeparators: [','],
            data:{ results: data, text: 'text' },
            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) {
                alert('added: ' + e.added.text + ' id ' + e.added.id)
            } else if (e.removed) {
                alert('removed: ' + e.removed.text + ' id ' + e.removed.id)

            }
        });

    });