Сумоселект фильтр групп

by AJIEKCEU

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>

<form class="my-select-body">
<div class="my-select-wrp">
<label for="id1">
text</label>
  <select id="id1"  multiple="multiple" placeholder="Отрасль статистики">
	<option value="507">Статистика малых территорий</option>
	<option value="495">Туризм</option>
	<option value="496">Прочие услуги</option>
	<option value="497">Внешняя торговля</option>
	<option value="498">Иностранные инвестиции</option>
	<optgroup label="Цены">
		<option data-parent="499" value="502">Прочие цены</option>
		<option data-parent="499" value="501">Цены производителей</option>
		<option data-parent="499" value="500">Потребительские цены</option>
	</optgroup>
	<option value="503">Стоимость рабочей силы</option>
	<option value="504">Наука и инновации</option>
	<option value="505">Телекоммуникационная деятельность, почтовая и курьерская деятельность</option>
	<option value="506">Окружающая среда</option>
	<option value="467">Труд</option>
	<option value="508">Уровень жизни населения</option>
	<option value="509">Гендерная статистика и статистика отдельных групп населения</option>
	<option value="510">Информационно-коммуникационные технологии</option>
	<option value="511">Показатели достижения Целей устойчивого развития</option>
	<option value="512">Статистика предпринимательства</option>
	<option value="513">Сводные статистические данные</option>
	<option value="514">Прочее</option>
	<option value="543">Основные показатели</option>
	<option value="490">Финансы организаций</option>
	<optgroup label="Население и миграция">
		<option data-parent="463" value="466">Миграция населения</option>
		<option data-parent="463" value="465">Естественное движение населения</option>
		<option data-parent="463" value="464">Население</option>
	</optgroup>
	<option...

CSS

.clearSelect{
  display: none;
}
.show{
  display: inline-block!important;
}

JavaScript

$('.my-select').SumoSelect({
  search: true
});



$('body').on('keyup', '.search-txt', function(){
	var parent = $(this).closest('.SumoSelect'),
			gruopUl = parent.find('.group');
      
  gruopUl.each(function(){
  	var that = $(this),
    		li = $(this).find('.opt');
        that.removeClass('hidden');
    for(var i= 0; i<li.length;i++){
        if(!li.eq(i).hasClass('hidden')){
        	that.removeClass('hidden');
          break;
        }
        else{
        	that.addClass('hidden');
        }
    }
  });
});

$('body').on('click', '.clearSelect', function(){
  var parent = $(this).closest('.my-select-wrp'),
  		thatIndex = parent.index(),
      placeholderText = parent.find('.my-select').attr('placeholder'),
      placeholderSpan = parent.find('.SelectBox span');
  parent.find('.my-select option:selected').prop("selected", false);
  parent.find('.opt').removeClass('selected');
	$('select.my-select')[thatIndex].sumo.unSelectAll();
   console.log($('select.my-select')[thatIndex]);
  placeholderSpan.addClass('placeholder');
  placeholderSpan.text(placeholderText);
  parent.find('.clearSelect').removeClass('show');
  console.log($(this).closest('.my-select-wrp').find('.my-select').val());
});

$('body').on('change', '.my-select', function(){
  var parent = $(this).closest('.my-select-wrp');
  if($('.my-select option:selected').length){
  	parent.find('.clearSelect').addClass('show');
  }
  else{
  	parent.find('.clearSelect').removeClass('show');
  }
  console.log(parent.find('.my-select').val());
});