Select2 Demo

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<input type="hidden" id="fruitSelect" value="" style="width:300px;" /><br />
<br />
<button type="button" id="showValue">Show Value</button><br />
<br />
<div id="output">
</div>

JavaScript

var PRESELECTED_FRUITS = [
    { id: 'f1', text: 'Apple' },
    { id: 'f2', text: 'Mango' },
    { id: 'f3', text: 'Orange' }
];

var ALL_FRUITS = [
    { id: 'f1', text: 'Apple' },
    { id: 'f2', text: 'Mango' },
    { id: 'f3', text: 'Orange' },
    { id: 'f4', text: 'Banana' },
    { id: 'f5', text: 'Pineapple' },
    { id: 'f6', text: 'Lime' }
];

$('#fruitSelect').select2({
    multiple: true,
    placeholder: "Search for fruits",
    minimumInputLength: 2,
    ajax: {
        type: 'post',
        url: '/echo/json/',
        dataType: 'json',
        data: function () {
            return { json: JSON.stringify(ALL_FRUITS), delay: 0.3 };
        },
        results: function (data) {
            return { results: data };
        }
    }
}).select2('data', PRESELECTED_FRUITS);


$('#showValue').click(function() {
    $('#output').text($('#fruitSelect').val());
});