<%@ page language="java" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/common/layouts/common.jsp" %>
<html>
<head>
    <title>指派驻场</title>
    <link href="${static_common }/customize/jquery-ui-bootstrap/css/multi-select.css" media="screen" rel="stylesheet"
          type="text/css">
</head>
<body>
<select id='custom-headers' multiple='multiple' class="nochosen">
    <c:forEach items="${users}" var="user">
        <option value='${user.id}'
                <c:if test="${user.projectAuthorized}">selected="selected"</c:if> >${user.realName}(${user.name})
        </option>
    </c:forEach>
    <c:forEach items="${addList}" var="user">
        <option value='${user.id}' selected="selected" disabled>${user.realName}(${user.name})
        </option>
    </c:forEach>
</select>
</body>
<script src="${static_common }/script/jquery/jquery.multi-select.js" type="text/javascript"></script>
<script src="${static_common }/script/jquery/jquery.quicksearch.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#custom-headers').multiSelect({
            selectableHeader: "<input type='text' class='search-input span3' autocomplete='off' placeholder='请输入'>",
            selectionHeader: "<input type='text' class='search-input span3' autocomplete='off' placeholder='请输入'>",
            selectableFooter: "<div class='custom-header'>可选驻场</div>",
            selectionFooter: "<div class='custom-header'>已选驻场</div>",
            keepOrder: true,
            afterInit: function (ms) {
                var that = this,
                    $selectableSearch = that.$selectableUl.prev(),
                    $selectionSearch = that.$selectionUl.prev(),
                    selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                    selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                    .on('keydown', function (e) {
                        if (e.which === 40) {
                            that.$selectableUl.focus();
                            return false;
                        }
                    });

                that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                    .on('keydown', function (e) {
                        if (e.which == 40) {
                            that.$selectionUl.focus();
                            return false;
                        }
                    });
            },
            afterSelect: function () {
                this.qs1.cache();
                this.qs2.cache();
            },
            afterDeselect: function () {
                this.qs1.cache();
                this.qs2.cache();
            },
            afterSelect: function (values) {
                this.qs1.cache();
                this.qs2.cache();
                // console.log(values);
                // console.log(this.results(true))
                $("#custom-headers").find("option").each(function () {
                    if ($(this).val() == values) {
                        $(this).attr("selected", "selected");
                    }
                });
            },
            afterDeselect: function (values) {
                this.qs1.cache();
                this.qs2.cache();
                $("#custom-headers").find("option").each(function () {
                    if ($(this).val() == values) {
                        $(this).removeAttr("selected");
                    }
                });
            }
        });
    })
</script>
</html>
