hugh
/
select2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QUnit Example</title>
    <link href="../../dist/css/select2.css" rel="stylesheet"/>

    <script src="../../vendor/almond-0.2.9.js" type="text/javascript"></script>
    <script src="../../vendor/jquery-2.1.0.js" type="text/javascript"></script>

    <script src="../../dist/js/select2.js"></script>
</head>
<body>


<input type="text" style="width:300px" autofocus/><br/>
<select style="width:300px" id="source">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
</select><br/>
<input type="text" style="width:300px" /><br/>
<select style="width:300px">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
</select>

<style>
.clear {
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    color: #666;
    cursor: pointer;
    display: none;
    font-size: 15px;
    font-weight: bold;
    height: 26px;
    outline: 0;
    position: absolute;
    top: 1px;
    right: 4px;
    width: 26px;
}

.clear:hover {
    color: #000;
}

.clearable {
    padding-right: 31px;
}

.clearable .clear {
    display: inline;
}
</style>

<script>
require(["select2/core", "select2/utils", "select2/selection/single",
         "select2/dropdown"], function (Select2, Utils, Selection, Dropdown) {
    function ClearSelection () { }

    ClearSelection.prototype.render = function (decorated) {
        var $selection = decorated.call(this);

        var $clear = $(
            '<button class="clear">&times;</button>'
        )

        $selection.append($clear);
        $selection.addClass("clearable");

        this.$clear = $clear;

        return $selection;
    };

    ClearSelection.prototype.bind = function (decorated, container, $container) {
        var self = this;

        decorated.call(this, container, $container);

        this.$container = $container;

        this.$clear.on("mousedown", function (evt) {
            evt.stopPropagation();

            var $first = $container.find("li").first();
            $first.mouseup();
        });
    };

    ClearSelection.prototype.update = function (decorated, data) {
        decorated.call(this, data);

        if (data.length == 0 || this.$container.find("li").length == 0) {
            this.$selection.removeClass("clearable");
            return;
        }

        var firstOption = this.$container.find("li").first().data("data");
        var firstData = data[0];

        if (firstOption.id == firstData.id) {
            this.$selection.removeClass("clearable");
        } else {
            this.$selection.addClass("clearable");
        }
    };

    function DropdownFooter () { }

    DropdownFooter.prototype.render = function (decorated) {
        var $dropdown = decorated.call(this);

        $dropdown.append('<div class="footer">My custom footer</div>');

        return $dropdown;
    }

    function DropdownHeader () { }

    DropdownHeader.prototype.render = function (decorated) {
        var $dropdown = decorated.call(this);

        $dropdown.prepend('<div class="header">Some custom header</div>');

        return $dropdown;
    }

    var CustomSelection = Utils.Decorate(Selection, ClearSelection)

    var CustomDropdown = Utils.Decorate(
        Utils.Decorate(Dropdown, DropdownHeader),
        DropdownFooter
    );

    var s2 = new Select2($("#source"), {
        selectionAdapter: CustomSelection,
        dropdownAdapter: CustomDropdown
    });
});
</script>

</body>
</html>