<%@ 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>
本次选择派工数据共${customerCount}条
<p>请选择客服：</p>

<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>
</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">
    function reset() {
        $('#custom-headers').multiSelect('deselect_all');
    }
    $(document).ready(function () {
        $('#custom-headers').multiSelect({
            selectableHeader: "<input type='text' class='search-input span3' autocomplete='off' placeholder='请输入'>",
            selectionHeader: "<div class='search-input span3' style='height:50px;'>&nbsp;</div>",
            selectableFooter: "",
            selectionFooter: "<input type='button' onclick='reset()' value='重置'>",
            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))
                var select_text;
                $("#custom-headers").find("option").each(function () {
                    if ($(this).val() == values) {
                        select_text = $(this).text();
                        $(this).attr("selected", "selected");
                    } else {
                        $(this).removeAttr("selected");
                    }
                });

                $(".ms-selectable span").each(function () {
                    if ($(this).text() == select_text) {
                        $(this).parent("li").hide();
                    } else {
                        $(this).parent("li").show();
                    }
                });
                $(".ms-selection span").each(function () {
                    if ($(this).text() != select_text) {
                        $(this).parent("li").hide();
                    } else {
                        $(this).parent("li").show();
                    }
                });
            },
            afterDeselect: function (values) {
                this.qs1.cache();
                this.qs2.cache();
                $("#custom-headers").find("option").each(function () {
                    if ($(this).val() == values) {
                        $(this).removeAttr("selected");
                    }
                });
            }
        });
    })
</script>
</html>
