Здравствуйте.
Подскажите пожалуйста как можно сделать стилизованный select с выпадающим списком список что бы был определенных размеров к примеру width 300px, а height 500px. при этом если список по высоте будет более 500px появлялся scrollbar. Ну и поиск по названию.
Скорее всего лучше искать какую-нибудь библиотеку, самому с 0 вряд ли легко это всё хорошо сделать.
Например
Alex P., спасибо Вам за помощь.
Нашел вот такой вариант Сhosen. Установил так же изображение выпадающем меню. Сделал это в связке Chosen и ImageSelect. Возможно ли сделать что бы изображение оставалось во время поиска?
Если надо выложить весь код скажите.
Так а чего б не выложить )
Какое?
Текущее выбранное тут остается: https://websemantics.github.io/Image-Select/
А вот в результатах поиска почему-то нет, но тут вроде бы пишут, что это исправлено несколько лет назад. 
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 из кода выше не хватило
Надо обращаться к текущему не трогая другие.
Может быть что-то типа
$(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 и скорость прокрутки будет быстро прокручиваться.
Почитать какие функции есть можно тут