Стилизация select + поиск

Здравствуйте.
Подскажите пожалуйста как можно сделать стилизованный select с выпадающим списком список что бы был определенных размеров к примеру width 300px, а height 500px. при этом если список по высоте будет более 500px появлялся scrollbar. Ну и поиск по названию.

Скорее всего лучше искать какую-нибудь библиотеку, самому с 0 вряд ли легко это всё хорошо сделать.

Например

Alex P., спасибо Вам за помощь.
Нашел вот такой вариант Сhosen. Установил так же изображение выпадающем меню. Сделал это в связке Chosen и ImageSelect. Возможно ли сделать что бы изображение оставалось во время поиска?

Если надо выложить весь код скажите.

Так а чего б не выложить )

Какое?
Текущее выбранное тут остается: https://websemantics.github.io/Image-Select/
А вот в результатах поиска почему-то нет, но тут вроде бы пишут, что это исправлено несколько лет назад. :thinking: https://github.com/websemantics/Image-Select/issues/21

Можете помочь ещё решить один вопрос Сhosen???

Поставил стилизованный скролл при помощи библиотеки mCustomScrollbar. И тут нашел баг. Скролл работает ровно до того момента пока я не воспользовался поиском далее скролл мой не работает

Вот код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet"/>

<select id="name" class="select">
  <option value="">Select</option>
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
  <option value="ddd">ddd</option>
  <option value="eee">eee</option>
  <option value="fff">fff</option>
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
  <option value="ddd">ddd</option>
  <option value="eee">eee</option>
  <option value="fff">fff</option>
</select>
$(function() {
  $('select.select').chosen({
    disable_search_threshold: 5,
    width: '50%'
  });
  $('select.select').on('chosen:showing_dropdown', function() {
    $('.chosen-results:visible').mCustomScrollbar({
      theme: 'minimal-dark'
    });
  });
  $('select.select').on('chosen:hiding_dropdown', function() {
   if($(".chosen-results").length) {
    $('.chosen-results').mCustomScrollbar('destroy');
    }
  });
});

не понимаю как исправить этот момент =(

А зачем он? Вроде и стандартный норм работает ) Даже лучше потому что этот какой-то медленный, особенно если мышкой нажать.

Да, в гугле много жалоб на то, что mCustomScrollbar уничтожается после поиска в Chosen. Может быть надо в каком-то еще событии пересоздавать.

Но я бы вообще не использовал не стандартный скроллбар, куча лишних усложнений, а какая польза непонятно.

Я просто хочу в стиль как то всё сделать. Что касается медленности пока поиск не трогаю все нормально работает.

Будем искать.

Таки нашел решение данного вопроса.
Во время поиска надо так сказать убивать и переназначать полосу прокрутки. То есть что у нас получается, каждый раз когда мы закрываем Chosen у нас отключается mCustomScrollbar и на оборот. Для того что бы mCustomScrollbar работал в Chosen нам всего лишь нужно написать такой код. (код нашел на одном из форумов)

$(function() {
  $('select.select').chosen({
    disable_search_threshold: 5,
    width: '50%'
  });
  $('select.select').on('chosen:showing_dropdown', function() {
    $('.chosen-results:visible').mCustomScrollbar({
      theme: '3d-dark',
	  scrollButtons: {enable:true}
    });
	$(".all-themes-switch a").click(function(e){
					e.preventDefault();
					var $this=$(this),
						rel=$this.attr("rel"),
						el=$(".content");
					switch(rel){
						case "toggle-content":
							el.toggleClass("expanded-content");
							break;
					}
	});
  });
  $('select.select').on('chosen:hiding_dropdown', function() {
   if($(".chosen-results").length) {
    $('.chosen-results').mCustomScrollbar('destroy');
    }
  });
});

Эта строка $(’.chosen-results’).mCustomScrollbar(‘destroy’); отвечает за закрытие и открытие и соответственно меняет class в ul и id в блоке div. При чем в ul при открытии добавляется два класса один статический второй динамический и в блок div добавляется динамичский id, который почти соответствует динамическому классу в ul


На скрине отметил их.

И так как же заставил работать этот скролл при использовании поиска.
Зашел в файл chosen.jquery.js (да сразу скажу у меня на данный момент версия 1.8.7)
Нашел там строки с 338 по 345

AbstractChosen.prototype.results_search = function(evt) {
      if (this.results_showing) {
        return this.winnow_results();
      } else {
        return this.results_show();
      }
    };

и добавил перед return this.winnow_results(); следующее $(’.chosen-results’).mCustomScrollbar(‘destroy’);

AbstractChosen.prototype.results_search = function(evt) {
      if (this.results_showing) {
	  $('.chosen-results').mCustomScrollbar('destroy');
        return this.winnow_results();
      } else {
        return this.results_show();
      }
    };

Теперь что у нас получается каждый раз когда вы что то пишите в поиске у нас это постоянно отслеживается и все динамические элементы, а именно class и id постоянно меняются и при этом скролл продолжает работать, а нам это и нужно. При условии если у нас получается в поиске большой список и он скроллится, то наш скролл будет на месте и наша красота не пропадет.
Надеюсь что это кому то поможет и главное что я сделал всё правильно так как в программировании я еще пока новичок.
И да хотел бы Alex P. сказать спасибо за помощь.

1 Симпатия

Обнаружилась другая проблема и связанна она именно со скроллом. Если имеются два select Chosen. Если открыть сначала один и не закрывать его. Сразу открыть второй (первый как и должно закрывается) потом сразу закрыть и снова открыть, то второй уже не откроется. И открываться они будут по очереди. Ну и конечно скролл перестает работать. Если скролл убрать то всё работает четко. Вот только скролл хотелось бы оставить

Я про задержку, которая особенно заметна при клике.
И еще это делает его поведение не таким, как привычное в ОС/браузере пользователя, что тоже может вызвать дискомфорт.

Стандартный скролбар в Firefox на Линуксе:

Скорее всего это можно так же переопределить в своем коде (может быть просто копированием этого куска с AbstractChosen.prototype.results_search = ). Иначе как потом библиотеку обновлять если в ней всё править.

Ну и вообще скорее всего можно не трогать ничего и использовать какое-то событие.
Странно, что chosen:hiding_dropdown из кода выше не хватило :thinking:

Надо обращаться к текущему не трогая другие.
Может быть что-то типа

$(this).find('.chosen-results')......

скорость прокрутки можно настроить scrollInertia: 60 измерение ms

Так же нашел решение последней моей проблемы с двумя и более select Chosen и к сожалению без правки библиотеки не обойтись. И так открываем chosen.jquery.js (напоминаю версия 1.8.7) находим строку под номером 1000. и после this.container.addClass(“chosen-with-drop”); вставляем $(’.chosen-results’).mCustomScrollbar(‘destroy’);.
Это нам дает возможность в любом порядке закрывать открывать что то искать и всё будет корректно работать кроме нашего красивого скролла. Что бы скролл у нас начал работать спускаемся ниже по коду и находим следующую строку this.container.removeClass(“chosen-with-drop”); и после этого мы вставляем следующий код

setTimeout(function() {
  $('.chosen-results').mCustomScrollbar({
      advanced:{updateOnContentResize:true},
      theme: '3d-dark',
      scrollButtons: {enable:true},
  });
}, 1);

setTimeout выставил на 1ms для того что бы в глаза не бросалась смена полосы прокрутки
advanced:{updateOnContentResize:true}, Автоматическое обновление полосы прокрутки при изменении размера содержимого, элемента или видового экрана. Без этого работать не хочет.
Дальше расписывать не буду всё стоит по стандарту. После всех манипуляций у меня всё открывается и закрывается в любом порядке и в любом направлении. Так же работает поиск без проблем. Скролл мой не теряется и хорошо отображается. Так же можно применить scrollInertia и скорость прокрутки будет быстро прокручиваться.
Почитать какие функции есть можно тут