Chosen: Сделайте ярлыки optgroup интерактивными

Это будет полезно, но стандартный html-select этого не позволяет.

@ Fr3nzzy : да, но если бы это было необязательно, это не было бы проблемой, не так ли?

@ Fr3nzzy : если позволите, стандартный html-select тоже не позволяет искать ... но это очень удобно, и поэтому Chosen великолепен - он улучшает стандартный выбор. Думаю, мы могли бы применить здесь те же рассуждения.

@ greg0ire : +1, я тоже ищу это: o)

@ pilap82 Однако select поддерживает поиск элемента путем ввода его имени.

справедливо :)

Может быть, не лучшее место для патча, но я надеюсь, что это поможет:

$( '.chzn-results .group-result' ).each( function () {
    var self      = $( this )
        , options = $( '~li', self )
        , next    = options.filter( '.group-result' ).get( 0 )
    ;
    self.data( 'chzn-options', options.slice( 0, options.index( next ) ) );
} )
.click( function () { 
    $( this ).data( 'chzn-options' ).mouseup()
 } )
.hover( function () { 
    $( this ).data( 'chzn-options' ).addClass( 'highlighted' );
 }, function () { 
    $( this ).data( 'chzn-options' ).removeClass( 'highlighted' );
 } )
.css( { cursor: 'pointer' } );

Это отличная идея. Я готов отправить запрос на перенос, если основная команда будет открыта для его объединения. Как ты думаешь @pfiller?

образец выбора партии с выбранными:

http://vafada.github.com/chosen-dojo/

Отличная работа!

Я бы хотел, чтобы это было добавлено в Chosen, но прослушивание событий следует добавлять менее интенсивным способом. Решение @adriengibrat применяет слушателя к каждой группе, что

+1. Я думал, что когда выбрана optgroup, она (необязательно) отключит / скроет всех своих дочерних элементов.

+1 за эту функцию

@pfiller есть обновления в этой ветке или в ветке search_improvements? Очень хотелось бы, чтобы его слили с мастером.

Мне тоже нужны выбираемые группы. Первоначально я пытался изменить код - затем меня вдохновил часто предлагаемый ответ «пропустить optgroup и добавить пробелы для отступа подэлементов». Это выглядело ужасно, но поскольку Chosen красиво оформлен с помощью CSS ... как насчет использования не-optgroup select и использования класса для каждого параметра, чтобы он выглядел как сгруппированный дисплей?

Вы можете увидеть базовую версию в этой скрипке: http://jsfiddle.net/slothbear/9xqpF/

Я не тратил много времени на стиль, но вы уловили идею. Это предоставляет две необходимые мне функции - выбираемые группы optgroups и группы optgroups с возможностью поиска. Все без оптгрупп.

Я близок к тому, чтобы использовать эту технику в своем проекте, но мне нужна обратная связь. Кажется, работает. Вы можете придумать лучший способ? Или какие-то ошибки?

_Просто понял, что я, вероятно, должен упомянуть - эта скрипка использует вилку Koenpunt от Chosen, чтобы включить добавление опций. Но я не думаю, что это влияет на этот пример.

_Я также ищу совета. Я знаю, что этот метод, вероятно, довольно далек от избранной философии, чтобы придерживаться функций select - но если вариант подходит для этой функции, я буду рад выполнить эту работу.

+1 для этой функции, которую я выбрал, пока искал способ поддержать эту

(Я искал возможность выбрать название группы ИЛИ выбрать элемент группы) в соответствии с приведенным выше Slothbear

Изменить: в конце концов я подражал этому, выполнив следующие действия.
Обратите внимание на классы, я также добавил .clickable в css, который устанавливает курсор на указатель.

<select name="category" data-placeholder="Choose a category..." class="chosen-select">
    <option value="group-1 class="group-result clickable">Group Title</option>
    <option value="1" class="group-option">Item Name</option>
    <option value="2" class="group-option">Item Name</option>
</select>

Вот мое решение. Хотя он специфичен для моих нужд, его можно легко настроить и изменить под свои нужды.

Пример:
машины
-car1
-автомобиль2
-car3
самолет
-plane1
-plane2

Я создал новую опцию в начале для всех групп, таким образом, опции «Все» появятся сразу после групп:
машины
-Все автомобили
-car1
-автомобиль2
-car3
люди
-Все люди
-person1
-person2

В «results_option_build» передайте опцию «All» в «result_add_group» в качестве второго параметра, когда данные представляют собой группу, и пропустите опцию «All» в следующей итерации:

if (data.group) {
content + = this.result_add_group (данные, _ref [++ _ i])

Теперь давайте перейдем к 'result_add_group' и заменим группу переданной нами опцией, но сохраним стиль группы:
result_add_group = function (группа, опция) {
.
.
возвращение "

Вот и все .. Если хотите, поменяйте курсор на указатель в css.

Похоже, что ни один из них не учитывает возможности поиска. По умолчанию при выборе варианта, если вы ищете вариант, он также будет отображать метку группы. Этот метод не работает, если у меня несколько групп и у них одинаковые параметры, это приведет к тому, что я просто получу список визуально идентичных элементов.

Было бы очень интересно интегрировать в библиотеку как опцию, так как это упростило бы управление множественным выбором. Вы в какой-то версии упоминали сжатие? приветствие

Я реализовал это только с помощью javascript, это временное исправление. Я не использую его для множественного выбора, я использую его для пользовательской группировки. В итоге я сделал группы опциями, но выглядели как группы, и дал ключевые слова «группы», которые, когда вы выполняете поиск подопции, группа будет отображаться, как обычно в selected.js http: // stackoverflow. com / q / 22336052/744228

Я добавил это в свою локальную копию selected, потому что это было требованием для моего проекта. В конце концов, это было довольно просто.

В функции set_default_values я поставил this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; в конце.

Затем в result_add_group я изменил классы, назначенные группе, на

if (this.group_selectable) {
        group_el.className = "active-result group-result";
      } else {
        group_el.className = "group-result";
      }
group_el.setAttribute("data-group-array-index", group.array_index);

И последнее, но не менее важное: в result_select немного взломали и добавили

if (high[0].getAttribute("data-group-array-index")) {
          var that = this;
          high.nextUntil('.group-result').each(function(index, element) {
            that.result_highlight = $(element);
            that.result_select(evt);
          });
        }

прямо перед
item = this.results_data[high[0].getAttribute("data-option-array-index")];

Смотрите полный код на https://gist.github.com/ruhley/9944574.

https://gist.github.com/ruhley/9944574#file -chosen-jquery-js-L1005

var itm = that.results_data[element.getAttribute("data-option-array-index")];
if(itm && !itm.selected){
    that.result_highlight = $(element);
    that.result_select(evt);
}

Немного поздно на вечеринку, но: +1 за эту функцию!

@ruhley +1 за ваше решение, работает как шарм!
Просто небольшая деталь, которая находится на полной кодовой странице, но не в сегменте кода: есть
еще{
отсутствует в конце.

Привет,
Спасибо @ruhley за ваш код.
Но с вашими изменениями группа не отключается после щелчка и может быть выбрана повторно.

Вот мои улучшения (на основе выбранной версии 1.4.2):

• После строки 158 в функции "set_default_values" добавьте:

this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false;

_Добавление параметра_

• Измените строку 222 в функции "results_option_build" следующим образом:

content += this.result_add_group(data, _ref.slice(_i+1, _i+data.children+1));

_Передайте дочерние элементы функции "result_add_group".

• Измените строку 272, повторное определение функции "result_add_group", на:

AbstractChosen.prototype.result_add_group = function(group, childrens) {

_Для получения детей_

• После строки 285 ( group_el = document.createElement("li"); ) в функции "result_add_group" добавьте:

if (this.group_selectable) {
  var all = true;
  $.each(childrens, function(index, element) {
    if(!element.selected){
      all = false;
    }
  });
  if(!all) {
    classes.push("active-result");
  } else {
    classes.push("result-selected");
  }
}
group_el.setAttribute("data-group-array-index", group.array_index);

_Это делает группу доступной для кликов, если хотя бы один дочерний элемент не выбран. (эта часть не может быть улучшена из-за переменной "все") ._

• После строки 1052 ( high.addClass("result-selected"); ) в функции "result_select" добавьте:

if (high[0].getAttribute("data-group-array-index")) {
  var that = this;
  high.nextUntil('.group-result').each(function(index, element) {
    if($(element).hasClass('active-result')) {
      that.result_highlight = $(element);
      that.result_select(evt); 
    }
  });
} else {

_Это только добавление невыбранных детей._

• После строки 1083 в функции "result_select":

}

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

Не забудьте правильно сделать отступ в этом фрагменте кода;)

Вот полная версия моего файла: https://gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
Вот разница (доступен 1 ​​год): https://www.diffnow.com/?report=8zhe9
Повеселись

Это все еще не реализовано?

@GuillaumeSTEIN Я пробовал ваш сценарий полной версии, похоже, ничего не изменилось.
Нужно ли мне добавлять в HTML какие-то специальные параметры или классы, чтобы он работал?
Может быть, вы можете сделать рабочий пример на http://codepen.io/ или jsfiddle?

Да, вам нужно установить option: group_selectable на true, чтобы активировать эту функцию

спасибо @GuillaumeSTEIN , это сработало, но чего мне не хватает в сценарии

у выбранных групп есть класс «отобранный по результатам».
Вы можете сделать немного CSS. Вот что я написал, возможно, вам придется адаптировать его под свои нужды:

 select.form-control + .chosen-container-multi .chosen-results li.result-selected{
     display: list-item;
     color: #ccc;
     cursor: default;
     background-color: white;
 }

Я ударил его # 2678

Это была бы такая полезная функция! Я бы хотел, чтобы это было реализовано!

+1 за эту функцию.

Если кто-то сочтет это полезным, я беру @slothbear jsfiddle и улучшаю его с помощью:

• Кнопка "Очистить все"
• Выбор элемента корневой категории отключает и отменяет выбор дочерних элементов. Почему ? В моем случае я бы использовал selected для создания фильтра иерархии, где выбор родительского узла подразумевает, что поиск будет выполняться по каждой дочерней категории, и мы не хотим загрязнять пользовательский интерфейс, помещая всех дочерних элементов как выбранные.

http://jsfiddle.net/Zardoz/pf6dhrbc/6/

Я просто обновился до выбранной версии 1.8.3, чтобы результаты оставались открытыми после выбора результата при множественном выборе (добавлено в версии 1.7.0). Отличная функция, рад, что она была добавлена. Однако я использовал 1.6.1 и использовал приведенный здесь код, чтобы разрешить добавление всей группы при нажатии имени группы: http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- выбранный-jquery-plugin /

Этот код до сих пор работал отлично. Использование 1.8.3 и hide_results_on_ select: false приводит к тому, что что-то ломается, и выбирает только текущий выделенный вариант результата. Когда эта строка удаляется (возвращается значение по умолчанию true, скрывать при выборе), она работает нормально и выбирает все параметры результатов группы. Итак, что-то в hide_results_on_ select: false нарушает / мешает возможности собрать все не выбранные .result-selected в .group-result. Жертвовать этой способностью ради новой функции жестоко.

Я просмотрю все вышеприведенные комментарии, чтобы увидеть, было ли это исправлено как недостаток новой функции, но я не могу сказать, какую версию используют люди, когда они это тестируют.

Любые идеи?

Ладно. У меня было достаточно. «апгрейд» до 1.8.3 на прошлой неделе был не чем иным, как игрой в «крота». css, непредвиденные проблемы с активностью и т. д. Я обновился, чтобы сохранить результаты открытыми для функции множественного выбора (на реализацию которой в первую очередь потребовались годы), но обнаружил, что она всегда возвращается наверх при выборе из результатов, так что хорошего это - все, что ничего не ждет. производительность для одного выбора с множеством опций как-то замедлилась до ползания. и многое другое, слишком много, чтобы перечислять здесь. Хорошая работа, поддерживающая эту штуку на протяжении многих лет, мне это нравится. но эти улучшения были нанесены за счет ухудшения пользовательского опыта, и я не могу этого допустить. Я изучаю, как вытащить выбранные и использовать select2. Сейчас 2018 год, пора найти инструмент для выбора, который соответствует ожиданиям пользователей, которые становится все сложнее удовлетворить. извините и спасибо

Я тоже перешел на select2, но дамп на selected до этого не делал. У вас странный способ сказать «спасибо».

Привет,
Если вы хотите использовать optgroup и иметь возможность щелкнуть по ней и автоматически добавить все параметры этой группы, просто добавьте это в свой javascript: (триггер события ".group-result" может быть более ограничительным)

Я уверен, что это можно добавить в класс AbstractChosen с помощью чего-то вроде AbstractChosen.prototype.optgroup_click = function (evt) ....

$('body').on('click','.group-result',function(){
    // id of select
    var quest=$(this).parent().parent().parent().attr('id');
    quest='#'+quest.substring(0,quest.lastIndexOf('_'));
    // number of optgroup
    var total=$(quest+' optgroup').length;
    // number of group after group-result clicked
    var nb=0;
    $(this).nextAll().each(function(){
        if($(this).hasClass('group-result'))nb++;
    });
    // for clicked group-result, select options in the right select tag by position
    $(quest+' optgroup:nth-of-type('+(total-nb)+')').children().each(function(){
        $(this).prop('selected','selected');
    });
    // update chosen !
    $(quest).trigger('chosen:updated');
});

Я использовал bootstrap-select, а также изо всех сил пытался найти что-то, чтобы иметь возможность щелкнуть по optgroup и выбрать все его элементы - эта ссылка действительно сработала для меня, надеюсь, это поможет: https://stackoverflow.com/questions/41821115 / select-deselect-optgroup-based-on-option-select-in-select-picker-boostrap