Select2 Demo

by john_s

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">
<select id="multiSelectBacked" multiple="multiple" style="width:300px;">
    <option value="c1">choice 1</option>
    <option value="c2" selected="selected">choice 2</option>
    <option value="c3">choice 3</option>
    <option value="c4" selected="selected">choice 4</option>
    <option value="c5" selected="selected">choice 5</option>
</select><br />
<br />
<input type="hidden" id="multiHiddenBacked" value="a c&nbsp;c1&nbsp;c3" style="width:300px;" /><br />
<br />
<input type="hidden" id="multiWithCategories" value="a c&nbsp;c1&nbsp;c3" style="width:300px;" /><br />
<br />
<button type="button" id="showHiddenValue">show hidden value</button><br />
<br />
<div id="output">
</div>

JavaScript

var CHOICES = [
    { id: 'c1', text: 'choice 1' },
    { id: 'c2', text: 'choice 2' },
    { id: 'c3', text: 'choice 3' },
    { id: 'c4', text: 'choice 4' },
    { id: 'c5', text: 'choice 5' }
];

var CAT_CHOICES = [
    {
        text: 'cat1',
        children: [
            { id: 'c1', text: 'choice 1' },
            { id: 'c2', text: 'choice 2' },
            { id: 'c3', text: 'choice 3' },
            { id: 'c4', text: 'choice 4' },
            { id: 'c5', text: 'choice 5' }
        ]
    },
    {
        text: 'cat2',
        children: [
            { id: 'c6', text: 'choice 6' },
            { id: 'c7', text: 'choice 7' },
            { id: 'c8', text: 'choice 8' },
            { id: 'c9', text: 'choice 9' }
        ]
    }
];

function findChoiceForId(choices, id) {
    console.log('id: ' + id);
    var result = null;
    $.each(choices, function(i, choice) {
        if (choice.children) {
            console.log('children');
            result = findChoiceForId(choice.children, id);
        } else if (choice.id === id) {
            result = choice;
        }
        return !result;
    });
    return result;
}

function findIndex(collection, callback) {
    var result = -1;
    $.each(collection, function(i, v) {
        if (callback.call(this, i, v)) {
            result = i;
            return false;
        }
        return true;
    });
    return result;
}

function getSelectedChoiceForInitSelection(selectedId, choices) {
    var result = (choices) ? findChoiceForId(choices, selectedId) : null;
    if (!result) {
        result = { id: selectedId, text: selectedId };
    }
    return result;
}

//$('#multiSelectBacked').prop('selectedIndex', 2);

$('#multiSelectBacked').select2();

var DATA = CHOICES;
var SEPARATOR = '\u00A0'; // Unicode Character 'NO-BREAK SPACE' (U+00A0)
var REPLACEMENT = ' ';
$('#multiHiddenBacked').select2({
    data: DATA,
    separator: SEPARATOR,
    multiple: true,
    createSearchChoice: function(term, choices) {
       ...