GNB selectbox 추가에 따른 수정

src/main/webapp/WEB-INF/views/common/fragments/header.html

@@ -33,6 +33,7 @@
 	<link rel="stylesheet" href="/ux/plugins/summernote/summernote.css">
 
 	<!-- Custom Common CSS -->
+	<link rel="stylesheet" th:href="@{'/ux/css/search_dropdown.css?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" href="/ux/css/search_dropdown.css"/>
 	<link rel="stylesheet" th:href="@{'/ux/css/admin.ui.css?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" href="/ux/css/admin.ui.css"/>
 	<link rel="stylesheet" href="/ux/plugins/gaga/gaga.agGrid.css"/>
 
@@ -48,6 +49,7 @@
 	<script type="text/javascript" src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
 	
 	<!-- Custom Common JS library -->
+	<script type="text/javascript" th:src="@{'/ux/js/search_dropdown.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/js/search_dropdown.js"></script>
 	<script type="text/javascript" th:src="@{'/ux/js/admin.ui.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/js/admin.ui.js"></script>
 	<script type="text/javascript" th:src="@{'/ux/js/admin.common.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/js/admin.common.js"></script>
 	<script type="text/javascript" th:src="@{'/ux/js/admin.popup.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/js/admin.popup.js"></script>

src/main/webapp/ux/css/admin.ui.css

@@ -102,20 +102,24 @@ header a, header button {color:#fff;}
 .header-menu .menu a {display:inline-block; margin-right:7px; padding:0 14px; line-height:34px; border-radius:50px; background:rgba(0, 0, 0, 0.07);}
 .header-menu .menu a:hover {color:rgba(255, 255, 255, 0.8);}
 .header-menu .menu a.on {background:rgba(0, 0, 0, 0.3);}
-.header-info {display:inline-block; float:right; margin-right:20px;}
-.header-info a {color:rgba(255, 255, 255, 0.8);}
+.header-info {float:right; margin-right:20px;}
+.header-info a {display:inline-block; position:relative; color:#e3dced;}
 .header-info a:hover {color:#fff;}
-.header-info i.heart {font-size:6px; color:rgba(255, 255, 255, 0.4); margin-right:3px;}
-.header-info i.dot {font-size:13px; color:rgba(255, 255, 255, 0.4); margin:0 3px;}
-.header-info-sm {display:none; float:right; margin-right:20px;}
-.header-info-sm a {display:inline-block; padding:0 7px; color:rgba(255, 255, 255, 0.8);}
-.header-info-sm a:hover {color:#fff;}
-
-/* GNB:툴팁--------------- */
-.tooltip .tooltiptext {visibility:hidden; position:absolute; top:48px; right:20px; z-index:1; padding:0 15px; line-height:30px; color:#fff; font-size:13px; text-align:center; background-color:#233646; border-radius:3px;}
-.tooltip .tooltiptext::after {content:""; position:absolute; bottom:100%; right:38px; border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
-.tooltip .tooltiptext.logout::after {right:10px;}
-.tooltip:hover .tooltiptext {visibility:visible;}
+.header-info a.mob i {display:none;}
+.header-info a .tooltip {display:none;}
+.header-info i.bar, .header-info i.dot {color:#e3dced; margin:0 3px;}
+.header-info .sltLayerpop {position:fixed; top:60px; right:0; line-height:50px; border-bottom-left-radius:9px; background-image:linear-gradient(to bottom, #5d5d5d, 10px, #828282); box-shadow:0 6px 12px rgb(0 0 0 / 18%)}
+.header-info .sltLayerpop .close{color:#fff; position: absolute; right:5px;top:15px;}
+.header-info .sltLayerpop .selectArea {background-image:linear-gradient(to bottom, #5d5d5d, 10px, #828282); padding:0 10px 0 15px;}
+/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
+@media ( max-width:1370px ) {
+  .header-info a {padding:0 7px;}
+  .header-info a.mob i {display:inline-flex;}
+  .header-info a strong {display:none;}
+  .header-info a.mob:hover::after {content:""; position:absolute; top:40px; left:50%; transform:translateX(-50%); border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
+  .header-info a.mob:hover .tooltip {display:unset; position:fixed; top:50px; right:20px; z-index:1; padding:0 15px; line-height:30px; color:#fff; font-size:13px; text-align:center; background-color:#233646; border-radius:3px; white-space:nowrap;}
+  .header-info i.bar, .header-info i.dot {display:none;}
+}
 
 /* LNB--------------- */
 #lnb-wrapper {position:fixed; top:60px; left:-260px; width:260px; height:100%; vertical-align:top; overflow-y:auto; transition:left .3s; -webkit-transition:left .3s; background-color:#2f4050;}
@@ -939,13 +943,6 @@ table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
 
 
 
-
-/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
-@media ( max-width:1370px ) {
- .header-info { display:none;}
- .header-info-sm { display:inline-block;}
-}
-
 /* 반응형 :dashboard(20200522) --------------- */
 @media ( max-width:1023px ) {
  /* 대시보드 */

src/main/webapp/ux/css/search_dropdown.css

@@ -0,0 +1,407 @@
+@-webkit-keyframes iui-fadeIn {
+  0% {
+    opacity: 0
+  }
+  100% {
+    opacity: 1
+  }
+}
+
+@-moz-keyframes iui-fadeIn {
+  0% {
+    opacity: 0
+  }
+  100% {
+    opacity: 1
+  }
+}
+
+@-ms-keyframes iui-fadeIn {
+  0% {
+    opacity: 0
+  }
+  100% {
+    opacity: 1
+  }
+}
+
+@-o-keyframes iui-fadeIn {
+  0% {
+    opacity: 0
+  }
+  100% {
+    opacity: 1
+  }
+}
+
+@keyframes iui-fadeIn {
+  0% {
+    opacity: 0
+  }
+  100% {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes iui-fadeOut {
+  0% {
+    opacity: 1
+  }
+  100% {
+    opacity: 0
+  }
+}
+
+@-moz-keyframes iui-fadeOut {
+  0% {
+    opacity: 1
+  }
+  100% {
+    opacity: 0
+  }
+}
+
+@-ms-keyframes iui-fadeOut {
+  0% {
+    opacity: 1
+  }
+  100% {
+    opacity: 0
+  }
+}
+
+@-o-keyframes iui-fadeOut {
+  0% {
+    opacity: 1
+  }
+  100% {
+    opacity: 0
+  }
+}
+
+@keyframes iui-fadeOut {
+  0% {
+    opacity: 1
+  }
+  100% {
+    opacity: 0
+  }
+}
+
+.dropdown-multiple,
+.dropdown-multiple-label,
+.dropdown-single {
+  position: relative
+}
+
+.dropdown-multiple-label.active .dropdown-main,
+.dropdown-multiple.active .dropdown-main,
+.dropdown-single.active .dropdown-main {
+  display: block;
+  -webkit-animation: iui-fadeIn .2s ease-in forwards;
+  -moz-animation: iui-fadeIn .2s ease-in forwards;
+  -ms-animation: iui-fadeIn .2s ease-in forwards;
+  -o-animation: iui-fadeIn .2s ease-in forwards;
+  animation: iui-fadeIn .2s ease-in forwards
+}
+
+.dropdown-multiple-label.active .dropdown-display-label:after,
+.dropdown-multiple-label.active .dropdown-display:after,
+.dropdown-multiple.active .dropdown-display-label:after,
+.dropdown-multiple.active .dropdown-display:after,
+.dropdown-single.active .dropdown-display-label:after,
+.dropdown-single.active .dropdown-display:after {
+  top:11px;
+  border-top: none;
+  border-bottom: 7px solid #999;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent
+}
+
+.dropdown-multiple-label.active .dropdown-display,
+.dropdown-multiple-label.active .dropdown-display-label,
+.dropdown-multiple.active .dropdown-display,
+.dropdown-multiple.active .dropdown-display-label,
+.dropdown-single.active .dropdown-display,
+.dropdown-single.active .dropdown-display-label {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0
+}
+
+.dropdown-display,
+.dropdown-display-label {
+  position: relative;
+  display: block;
+  margin-bottom: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-image: none;
+  border: 1px solid #ccc;
+  color: #333;
+  background-color: #fff
+}
+
+.dropdown-display-label:after,
+.dropdown-display:after {
+  content: '';
+  position: absolute;
+  border-top: 7px solid #888;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  top: 12px;
+  right: 8px
+}
+
+.dropdown-clear-all {/*
+   background-color: #fff;
+    border: none;
+    font-size: 22px;
+    z-index: 999;
+    color: #999;
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    display: none;
+    width: 25px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px; */
+ /*    display:none; */
+}
+
+.dropdown-clear-all:focus {
+  outline: 0
+}
+
+.dropdown-clear-all:hover {
+  color: #ccc;
+  text-decoration: none;
+}
+
+.dropdown-display {
+  white-space: nowrap;
+  padding: 0 20px 0 12px;
+  width:90% !important;
+  height:30px;
+}
+
+.dropdown-multiple:hover .dropdown-clear-all,
+.dropdown-single:hover .dropdown-clear-all {
+  display: block
+}
+
+.dropdown-display .dropdown-chose-list {
+  display: inline-block;
+/*   vertical-align: middle; */
+  line-height:28px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color:#111;
+}
+
+.dropdown-display .dropdown-chose-list span:before {
+  content: ','
+}
+
+.dropdown-display .dropdown-chose-list span:first-child:before {
+  content: ''
+}
+
+.dropdown-display .placeholder {
+  display: none !important
+}
+
+.dropdown-display .placeholder:first-child {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  color: #999;
+  display: block !important;
+  text-indent: 10px;
+  font-size: 13px;
+  line-height: 28px
+}
+
+.dropdown-display input {
+  border: 0;
+  outline: 0
+}
+
+.dropdown-display-label {
+  cursor: text;
+  padding: 6px 25px 5px 0
+}
+
+.dropdown-display-label .dropdown-search {
+  display: inline-block;
+}
+
+.dropdown-display-label input,
+.dropdown-display-label input:focus {
+  border: none;
+  outline: 0
+}
+
+.dropdown-display-label .dropdown-chose-list {
+  display: inline-block;
+  padding: 0 5px
+}
+
+.dropdown-display-label .dropdown-chose-list .placeholder {
+  display: none
+}
+
+.dropdown-display-label .dropdown-selected {
+  position: relative;
+  margin: 0 5px 5px 0;
+  padding: 0 20px 0 5px;
+  border: 1px solid #aaa;
+  max-width: 100%;
+  border-radius: 3px;
+  background-repeat: repeat-x;
+  color: #333;
+  cursor: default;
+  display: inline-block
+}
+
+.dropdown-selected .del {
+  display:inline-flex;
+  -webkit-appearance: none;
+  padding:0px 3px;
+  cursor: pointer;
+  background: 0 0;
+  border: 0;
+  float: right;
+  line-height: 1;
+  color: #999;
+  position: absolute;
+  right:30px;
+  top: 50%;
+  transform:translateY(-50%);
+  border-radius: 100%;
+}
+
+.dropdown-selected .del:after {
+  content: '\D7';
+  font-size: 16px
+}
+
+.dropdown-main {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1010;
+  width: 100%;
+  color: #444;
+  box-sizing: border-box;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  margin-top: -1px;
+  border-top: 0;
+  padding: 4px 7px;
+  display: none
+}
+
+.dropdown-main ul {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 240px;
+  margin: 0;
+  padding: 0
+}
+
+.dropdown-main input {
+  margin-top: 0;
+  display: block;
+  box-sizing: border-box;
+  height: 30px;
+  border: 1px solid #ccc;
+  width: 100%;
+  text-indent: 5px;
+  border-radius: 3px;
+}
+
+.dropdown-main .dropdown-search {
+  position:relative;
+}
+.dropdown-main .dropdown-search button.del {
+  position:absolute;
+  top:5px;
+  right:0;
+  width:30px;
+  height:32px;
+  line-height:26px;
+  text-align: center;
+}
+.dropdown-main .dropdown-search  button.del::after{
+  content:'×';
+}
+
+
+.dropdown-main .dropdown-search {
+  display: block;
+  padding: 5px 0
+}
+
+.dropdown-group {
+  font-weight: 700
+}
+
+.dropdown-group,
+.dropdown-option {
+  margin: 0;
+  padding-left: 12px;
+  list-style: none;
+  line-height: 28px;
+  word-wrap: break-word;
+  font-size:13px;
+}
+
+.dropdown-option {
+  cursor: pointer
+}
+
+.dropdown-option:focus,
+.dropdown-option:hover {
+  background-color: #efefef;
+  outline: 0
+}
+
+.dropdown-option[disabled] {
+  color: #ddd;
+  background-color: #fff;
+  cursor: not-allowed;
+  text-decoration: line-through
+}
+
+.dropdown-option.dropdown-chose {
+  background-color:#d1d9ff;
+}
+
+.dropdown-maxItem-alert, .dropdown-minItem-alert {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #e4e3e2;
+  width: 100%;
+  height: 39px;
+  line-height: 39px;
+  padding: 0 5px;
+  border-radius: 5px;
+  color: #999;
+  -webkit-animation: iui-fadeIn .2s ease-in forwards;
+  -moz-animation: iui-fadeIn .2s ease-in forwards;
+  -ms-animation: iui-fadeIn .2s ease-in forwards;
+  -o-animation: iui-fadeIn .2s ease-in forwards;
+  animation: iui-fadeIn .2s ease-in forwards
+}

src/main/webapp/ux/js/search_dropdown.js

@@ -0,0 +1,606 @@
+;
+(function ($) {
+  'use strict';
+
+  function noop() { }
+
+  function throttle(func, wait, options) {
+    var context, args, result;
+    var timeout = null;
+    var previous = 0;
+    if (!options) options = {};
+    var later = function () {
+      previous = options.leading === false ? 0 : new Date().getTime();
+      timeout = null;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    };
+    return function () {
+      var now = new Date().getTime();
+      if (!previous && options.leading === false) previous = now;
+      var remaining = wait - (now - previous);
+      context = this;
+      args = arguments;
+
+      if (remaining <= 0 || remaining > wait) {
+        clearTimeout(timeout);
+        timeout = null;
+        previous = now;
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      } else if (!timeout && options.trailing !== false) {
+        timeout = setTimeout(later, remaining);
+      }
+      return result;
+    };
+  }
+
+  var isSafari = function () {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf('safari') !== -1) {
+      return ua.indexOf('chrome') > -1 ? false : true;
+    }
+  }();
+
+  var settings = {
+    readonly: false,
+    minCount: 0,
+    minCountErrorMessage: '',
+    limitCount: Infinity,
+    limitCountErrorMessage: '',
+    input: '<input type="text" maxLength="20" placeholder="Search...">',
+    data: [],
+    searchable: true,
+    searchNoData: '<li style="color:#ddd">검색결과가 없습니다.</li>',
+    init: noop,
+    choice: noop,
+    extendProps: []
+  };
+
+  var KEY_CODE = {
+    up: 38,
+    down: 40,
+    enter: 13
+  };
+
+  var EVENT_SPACE = {
+    click: 'click.iui-dropdown',
+    focus: 'focus.iui-dropdown',
+    keydown: 'keydown.iui-dropdown',
+    keyup: 'keyup.iui-dropdown'
+  };
+
+  var ALERT_TIMEOUT_PERIOD = 1000;
+
+  function createTemplate() {
+    var isLabelMode = this.isLabelMode;
+    var searchable = this.config.searchable;
+    var templateSearch = searchable ? '<span class="dropdown-search">' + this.config.input + '</span>' : '';
+
+    return isLabelMode ? '<div class="dropdown-display-label"><div class="dropdown-chose-list">' + templateSearch + '</div></div><div class="dropdown-main">{{ul}}</div>' : '<a href="javascript:;" class="dropdown-display" tabindex="0"><span class="dropdown-chose-list"></span></a><div class="dropdown-main">' + templateSearch + '{{ul}}</div>';
+  }
+
+  function minItemsAlert() {
+    var _dropdown = this;
+    var _config = _dropdown.config;
+    var $el = _dropdown.$el;
+    var $alert = $el.find('.dropdown-minItem-alert');
+    var alertMessage = _config.minCountErrorMessage;
+    clearTimeout(_dropdown.itemCountAlertTimer);
+
+    if ($alert.length === 0) {
+      if (!alertMessage) {
+        alertMessage = '\u6700\u4f4e\u9009\u62e9' + _config.minCount + '\u4E2A';
+      }
+      $alert = $('<div class="dropdown-minItem-alert">' + alertMessage + '</div>');
+    }
+
+    $el.append($alert);
+    _dropdown.itemCountAlertTimer = setTimeout(function () {
+      $el.find('.dropdown-minItem-alert').remove();
+    }, ALERT_TIMEOUT_PERIOD);
+  }
+
+  function maxItemAlert() {
+    var _dropdown = this;
+    var _config = _dropdown.config;
+    var $el = _dropdown.$el;
+    var $alert = $el.find('.dropdown-maxItem-alert');
+    var alertMessage = _config.limitCountErrorMessage;
+    clearTimeout(_dropdown.itemLimitAlertTimer);
+
+    if ($alert.length === 0) {
+      if (!alertMessage) {
+        alertMessage = '\u6700\u591A\u53EF\u9009\u62E9' + _config.limitCount + '\u4E2A';
+      }
+      $alert = $('<div class="dropdown-maxItem-alert">' + alertMessage + '</div>');
+    }
+
+    $el.append($alert);
+    _dropdown.itemLimitAlertTimer = setTimeout(function () {
+      $el.find('.dropdown-maxItem-alert').remove();
+    }, ALERT_TIMEOUT_PERIOD);
+  }
+
+  function selectToDiv(str) {
+    var result = str || '';
+    result = result.replace(/<select[^>]*>/gi, '').replace('</select>', '');
+    result = result.replace(/<\/optgroup>/gi, '');
+    result = result.replace(/<optgroup[^>]*>/gi, function (matcher) {
+      var groupName = /label="(.[^"]*)"(\s|>)/.exec(matcher);
+      var groupId = /data\-group\-id="(.[^"]*)"(\s|>)/.exec(matcher);
+      return '<li class="dropdown-group" data-group-id="' + (groupId ? groupId[1] : '') + '">' + (groupName ? groupName[1] : '') + '</li>';
+    });
+    result = result.replace(/<option(.*?)<\/option>/gi, function (matcher) {
+      var value = $(matcher).val();
+      var name = />(.*)<\//.exec(matcher);
+      var isSelected = matcher.indexOf('selected') > -1 ? true : false;
+      var isDisabled = matcher.indexOf('disabled') > -1 ? true : false;
+      var extendAttr = ''
+      var extendProps = matcher.replace(/data-(\w+)="?(.[^"]+)"?/g, function ($1) {
+        extendAttr += $1 + ' '
+      });
+      return '<li ' + (isDisabled ? ' disabled' : ' tabindex="0"') + ' data-value="' + (value || '') + '" class="dropdown-option ' + (isSelected ? 'dropdown-chose' : '') + '" ' + extendAttr + '>' + (name ? name[1] : '') + '</li>';
+    });
+
+    return result;
+  }
+
+  function objectToSelect(data) {
+    var dropdown = this;
+    var map = {};
+    var result = '';
+    var name = [];
+    var selectAmount = 0;
+    var extendProps = dropdown.config.extendProps;
+
+    if (!data || !data.length) {
+      return false;
+    }
+
+    $.each(data, function (index, val) {
+      var hasGroup = val.groupId;
+      var isDisabled = val.disabled ? ' disabled' : '';
+      var isSelected = val.selected && !isDisabled ? ' selected' : '';
+      var extendAttr = ''
+      $.each(extendProps, function (index, value) {
+        if (val[value]) {
+          extendAttr += 'data-' + value + '="' + val[value] + '" '
+        }
+      })
+      var temp = '<option' + isDisabled + isSelected + ' value="' + val.id + '" ' + extendAttr + '>' + val.name + '</option>';
+      if (isSelected) {
+        name.push('<span class="dropdown-selected">' + val.name + '<i class="del" data-id="' + val.id + '"></i></span>');
+        selectAmount++;
+      }
+      if (hasGroup) {
+        if (map[val.groupId]) {
+          map[val.groupId] += temp;
+        } else {
+          map[val.groupId] = val.groupName + '&janking&' + temp;
+        }
+      } else {
+        map[index] = temp;
+      }
+    });
+
+    $.each(map, function (index, val) {
+      var option = val.split('&janking&');
+      if (option.length === 2) {
+        var groupName = option[0];
+        var items = option[1];
+        result += '<optgroup label="' + groupName + '" data-group-id="' + index + '">' + items + '</optgroup>';
+      } else {
+        result += val;
+      }
+    });
+
+    return [result, name, selectAmount];
+  }
+
+  function selectToObject(el) {
+    var $select = el;
+    var result = [];
+
+    function readOption(key, el) {
+      var $option = $(el);
+      this.id = $option.prop('value');
+      this.name = $option.text();
+      this.disabled = $option.prop('disabled');
+      this.selected = $option.prop('selected');
+    }
+
+    $.each($select.children(), function (key, el) {
+      var tmp = {};
+      var tmpGroup = {};
+      var $el = $(el);
+      if (el.nodeName === 'OPTGROUP') {
+        tmpGroup.groupId = $el.data('groupId');
+        tmpGroup.groupName = $el.attr('label');
+        $.each($el.children(), $.proxy(readOption, tmp));
+        $.extend(tmp, tmpGroup);
+      } else {
+        $.each($el, $.proxy(readOption, tmp));
+      }
+      result.push(tmp);
+    });
+
+    return result;
+  }
+
+  var action = {
+    show: function (event) {
+      event.stopPropagation();
+      var _dropdown = this;
+      $(document).trigger('click.dropdown');
+      _dropdown.$el.addClass('active');
+    },
+    search: throttle(function (event) {
+      var _dropdown = this;
+      var _config = _dropdown.config;
+      var $el = _dropdown.$el;
+      var $input = $(event.target);
+      var intputValue = $input.val();
+      var data = _dropdown.config.data;
+      var result = [];
+      if (event.keyCode > 36 && event.keyCode < 41) {
+        return;
+      }
+      $.each(data, function (key, value) {
+        if ((value.groupName && value.groupName.toLowerCase().indexOf(intputValue.toLowerCase()) > -1) || value.name.toLowerCase().indexOf(intputValue.toLowerCase()) > -1 || '' + value.id === '' + intputValue) {
+          result.push(value);
+        }
+      });
+      $el.find('ul').html(selectToDiv(objectToSelect.call(_dropdown, result)[0]) || _config.searchNoData);
+    }, 300),
+    control: function (event) {
+      var keyCode = event.keyCode;
+      var KC = KEY_CODE;
+      var index = 0;
+      var direct;
+      var itemIndex;
+      var $items;
+      if (keyCode === KC.down || keyCode === KC.up) {
+        direct = keyCode === KC.up ? -1 : 1;
+        $items = this.$el.find('[tabindex]');
+        itemIndex = $items.index($(document.activeElement));
+        if (itemIndex === -1) {
+          index = direct + 1 ? -1 : 0;
+        } else {
+          index = itemIndex;
+        }
+        index = index + direct;
+        if (index === $items.length) {
+          index = 0;
+        }
+        $items.eq(index).focus();
+        event.preventDefault();
+      }
+    },
+    multiChoose: function (event, status) {
+      var _dropdown = this;
+      var _config = _dropdown.config;
+      var $select = _dropdown.$select;
+      var $target = $(event.target);
+      var value = $target.attr('data-value');
+      var hasSelected = $target.hasClass('dropdown-chose');
+      var selectedName = [];
+      var selectedProp;
+
+      if ($target.hasClass('dropdown-display')) {
+        return false;
+      }
+
+      if (hasSelected) {
+        $target.removeClass('dropdown-chose');
+        _dropdown.selectAmount--;
+      } else {
+        if (_dropdown.selectAmount < _config.limitCount) {
+          $target.addClass('dropdown-chose');
+          _dropdown.selectAmount++;
+        } else {
+          maxItemAlert.call(_dropdown);
+          return false;
+        }
+      }
+
+      _dropdown.name = [];
+
+      $.each(_config.data, function (key, item) {
+        if ('' + item.id === '' + value) {
+          selectedProp = item;
+          item.selected = hasSelected ? false : true;
+        }
+        if (item.selected) {
+          selectedName.push(item.name);
+          _dropdown.name.push('<span class="dropdown-selected">' + item.name + '<i class="del" data-id="' + item.id + '"></i></span>');
+        }
+      });
+
+      $select.find('option[value="' + value + '"]').prop('selected', hasSelected ? false : true);
+
+      if (hasSelected && _dropdown.selectAmount < _config.minCount) {
+        minItemsAlert.call(_dropdown);
+      }
+
+      _dropdown.$choseList.find('.dropdown-selected').remove();
+      _dropdown.$choseList.prepend(_dropdown.name.join(''));
+      _dropdown.$el.find('.dropdown-display').attr('title', selectedName.join(','));
+      _config.choice.call(_dropdown, event, selectedProp);
+    },
+    singleChoose: function (event) {
+      var _dropdown = this;
+      var _config = _dropdown.config;
+      var $el = _dropdown.$el;
+      var $select = _dropdown.$select;
+      var $target = $(event.target);
+      var value = $target.attr('data-value');
+      var hasSelected = $target.hasClass('dropdown-chose');
+
+      if ($target.hasClass('dropdown-chose') || $target.hasClass('dropdown-display')) {
+        return false;
+      }
+
+      _dropdown.name = [];
+
+
+      $el.removeClass('active').find('li').not($target).removeClass('dropdown-chose');
+
+      $target.toggleClass('dropdown-chose');
+      $.each(_config.data, function (key, item) {
+        item.selected = false;
+        if ('' + item.id === '' + value) {
+          item.selected = hasSelected ? 0 : 1;
+          if (item.selected) {
+            _dropdown.name.push('<span class="dropdown-selected">' + item.name + '<i class="del" data-id="' + item.id + '"></i></span>');
+          }
+        }
+      });
+
+      $select.find('option[value="' + value + '"]').prop('selected', true);
+
+      _dropdown.name.push('<span class="placeholder">' + _dropdown.placeholder + '</span>');
+      _dropdown.$choseList.html(_dropdown.name.join(''));
+      _config.choice.call(_dropdown, event);
+    },
+    del: function (event) {
+      var _dropdown = this;
+      var _config = _dropdown.config;
+      var $target = $(event.target);
+      var id = $target.data('id');
+      $.each(_dropdown.name, function (key, value) {
+        if (value.indexOf('data-id="' + id + '"') !== -1) {
+          _dropdown.name.splice(key, 1);
+          return false;
+        }
+      });
+
+      $.each(_dropdown.config.data, function (key, item) {
+        if ('' + item.id == '' + id) {
+          item.selected = false;
+          return false;
+        }
+      });
+
+      _dropdown.selectAmount--;
+      _dropdown.$el.find('[data-value="' + id + '"]').removeClass('dropdown-chose');
+      _dropdown.$el.find('[value="' + id + '"]').prop('selected', false).removeAttr('selected');
+      $target.closest('.dropdown-selected').remove();
+      _config.choice.call(_dropdown, event);
+
+      return false;
+    },
+    clearAll: function (event) {
+      var _dropdown = this;
+      var _config = _dropdown.config;
+      event && event.preventDefault();
+      console.log(this)
+      this.$choseList.find('.del').each(function (index, el) {
+        $(el).trigger('click');
+      });
+
+      if (_config.minCount > 0) {
+        minItemsAlert.call(_dropdown);
+      }
+
+      this.$el.find('.dropdown-display').removeAttr('title');
+      return false;
+    }
+  };
+
+  function Dropdown(options, el) {
+    this.$el = $(el);
+    this.$select = this.$el.find('select');
+    this.placeholder = this.$select.attr('placeholder');
+    this.config = options;
+    this.name = [];
+    this.isSingleSelect = !this.$select.prop('multiple');
+    this.selectAmount = 0;
+    this.itemLimitAlertTimer = null;
+    this.isLabelMode = this.config.multipleMode === 'label';
+    this.init();
+  }
+
+  Dropdown.prototype = {
+    init: function () {
+      var _this = this;
+      var _config = _this.config;
+      var $el = _this.$el;
+      _this.$select.hide();
+      $el.addClass(_this.isSingleSelect ? 'dropdown-single' : _this.isLabelMode ? 'dropdown-multiple-label' : 'dropdown-multiple');
+
+      if (_config.data.length === 0) {
+        _config.data = selectToObject(_this.$select);
+      }
+
+      var processResult = objectToSelect.call(_this, _config.data);
+
+      _this.name = processResult[1];
+      _this.selectAmount = processResult[2];
+      _this.$select.html(processResult[0]);
+      _this.renderSelect();
+      _this.changeStatus(_config.disabled ? 'disabled' : _config.readonly ? 'readonly' : false);
+
+      _this.config.init();
+    },
+    renderSelect: function (isUpdate, isCover) {
+      var _this = this;
+      var $el = _this.$el;
+      var $select = _this.$select;
+      var elemLi = selectToDiv($select.prop('outerHTML'));
+      var template;
+
+      if (isUpdate) {
+        $el.find('ul')[isCover ? 'html' : 'append'](elemLi);
+      } else {
+        template = createTemplate.call(_this).replace('{{ul}}', '<ul>' + elemLi + '</ul>');
+        $el.append(template).find('ul').removeAttr('style class');
+      }
+
+      if (isCover) {
+        _this.name = [];
+        _this.$el.find('.dropdown-selected').remove();
+        _this.$select.val('');
+      }
+
+      _this.$choseList = $el.find('.dropdown-chose-list');
+
+      if (!_this.isLabelMode) {
+        _this.$choseList.html($('<span class="placeholder"></span>').text(_this.placeholder));
+      }
+
+      _this.$choseList.prepend(_this.name ? _this.name.join('') : []);
+    },
+    bindEvent: function () {
+      var _this = this;
+      var $el = _this.$el;
+      var openHandle = isSafari ? EVENT_SPACE.click : EVENT_SPACE.focus;
+
+      $el.on(EVENT_SPACE.click, function (event) {
+        event.stopPropagation();
+      });
+
+      $el.on(EVENT_SPACE.click, '.del', $.proxy(action.del, _this));
+
+      // show
+      if (_this.isLabelMode) {
+        $el.on(EVENT_SPACE.click, '.dropdown-display-label', function () {
+          $el.find('input').focus();
+        });
+        if (_this.config.searchable) {
+          $el.on(EVENT_SPACE.focus, 'input', $.proxy(action.show, _this));
+        } else {
+          $el.on(EVENT_SPACE.click, $.proxy(action.show, _this));
+        }
+        $el.on(EVENT_SPACE.keydown, 'input', function (event) {
+          if (event.keyCode === 8 && this.value === '' && _this.name.length) {
+            $el.find('.del').eq(-1).trigger('click');
+          }
+        });
+      } else {
+        $el.on(openHandle, '.dropdown-display', $.proxy(action.show, _this));
+        $el.on(openHandle, '.dropdown-clear-all', $.proxy(action.clearAll, _this));
+      }
+
+      $el.on(EVENT_SPACE.keyup, 'input', $.proxy(action.search, _this));
+
+      $el.on(EVENT_SPACE.keyup, function (event) {
+        var keyCode = event.keyCode;
+        var KC = KEY_CODE;
+        if (keyCode === KC.enter) {
+          $.proxy(_this.isSingleSelect ? action.singleChoose : action.multiChoose, _this, event)();
+        }
+      });
+
+      $el.on(EVENT_SPACE.keydown, $.proxy(action.control, _this));
+
+      $el.on(EVENT_SPACE.click, 'li[tabindex]', $.proxy(_this.isSingleSelect ? action.singleChoose : action.multiChoose, _this));
+    },
+    unbindEvent: function () {
+      var _this = this;
+      var $el = _this.$el;
+      var openHandle = isSafari ? EVENT_SPACE.click : EVENT_SPACE.focus;
+
+      $el.off(EVENT_SPACE.click);
+      $el.off(EVENT_SPACE.click, '.del');
+
+      // show
+      if (_this.isLabelMode) {
+        $el.off(EVENT_SPACE.click, '.dropdown-display-label');
+        $el.off(EVENT_SPACE.focus, 'input');
+        $el.off(EVENT_SPACE.keydown, 'input');
+      } else {
+        $el.off(openHandle, '.dropdown-display');
+        $el.off(openHandle, '.dropdown-clear-all');
+      }
+
+      $el.off(EVENT_SPACE.keyup, 'input');
+      $el.off(EVENT_SPACE.keyup);
+      $el.off(EVENT_SPACE.keydown);
+      $el.off(EVENT_SPACE.click, '[tabindex]');
+    },
+    changeStatus: function (status) {
+      var _this = this;
+      if (status === 'readonly') {
+        _this.unbindEvent();
+      } else if (status === 'disabled') {
+        _this.$select.prop('disabled', true);
+        _this.unbindEvent();
+      } else {
+        _this.$select.prop('disabled', false);
+        _this.bindEvent();
+      }
+    },
+    update: function (data, isCover) {
+      var _this = this;
+      var _config = _this.config;
+      var $el = _this.$el;
+      var _isCover = isCover || false;
+
+      if (Object.prototype.toString.call(data) !== '[object Array]') {
+        return;
+      }
+
+      _config.data = _isCover ? data.slice(0) : _config.data.concat(data);
+
+      var processResult = objectToSelect.call(_this, _config.data);
+
+      _this.name = processResult[1];
+      _this.selectAmount = processResult[2];
+      _this.$select.html(processResult[0]);
+      _this.renderSelect(true, _isCover);
+    },
+    destroy: function () {
+      this.unbindEvent();
+      this.$el.children().not('select').remove();
+      this.$el.removeClass('dropdown-single dropdown-multiple-label dropdown-multiple');
+      this.$select.show();
+    },
+    choose: function (values, status) {
+      var valArr = Object.prototype.toString.call(values) === '[object Array]' ? values : [values];
+      var _this = this;
+      var _status = status !== void 0 ? !!status : true
+      $.each(valArr, function (index, value) {
+        var $target = _this.$el.find('[data-value="' + value + '"]');
+        var targetStatus = $target.hasClass('dropdown-chose');
+        if (targetStatus !== _status) {
+          $target.trigger(EVENT_SPACE.click, status || true)
+        }
+      });
+    },
+    reset: function () {
+      action.clearAll.call(this)
+    }
+  };
+
+  $(document).on('click.dropdown', function () {
+    $('.dropdown-single,.dropdown-multiple,.dropdown-multiple-label').removeClass('active');
+  });
+
+  $.fn.dropdown = function (options) {
+    this.each(function (index, el) {
+      $(el).data('dropdown', new Dropdown($.extend(true, {}, settings, options), el));
+    });
+    return this;
+  }
+})(jQuery);