Chosen: Оставайтесь открытыми при множественном выборе

Выбор останется открытым, если вы удерживаете CMD ⌘ или CTRL при выборе параметров. В настоящее время нет возможности сохранить параметр выбора по умолчанию.

Это можно как-то реализовать?

Можете ли вы привести пример, в каком случае это было бы полезно?

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

+1

+1 - По той единственной причине, что мы используем Chosen в качестве механизма фильтрации, где конечный пользователь, скорее всего, будет фильтровать по нескольким элементам в каждой категории. Текущая реализация означает, что мы должны включить вспомогательную строку текста, объясняющую, как держать поле открытым, вместо того, чтобы просто установить параметр и оставить его открытым столько, сколько им нужно.

Абсолютно +1 !! Существует множество вариантов использования, когда выбор должен оставаться открытым, чтобы можно было выбрать несколько вариантов. На самом деле, я думаю, что количество вариантов использования, которые выиграют от того, что выбор остается открытым, превышает число тех, где выбор должен закрыться после выбора только одного варианта. С этой точки зрения, держать его открытым должно быть поведением по умолчанию. Он не зря называется "select-multiple" ;-) Но опция конфигурации, позволяющая держать его открытым, была бы достаточно хороша, и я надеюсь, что это будет реализовано очень скоро.

Привет,

Кто-нибудь нашел способ решить это?

Когда я пытаюсь сделать следующее, это тоже не работает, оно не запускает событие открытия:

jQuery("select.select-chosen").on('change', function(evt, params) {
    jQuery(this).trigger('chosen:open');
});

Мистер Александр

+1 за @geebru и @silkfire

Это, вероятно, проблема № 1 для людей, использующих выбранный элемент управления в множественном режиме, особенно когда необходимо выбрать более 2-3 элементов. Надеюсь увидеть это добавленным. Спасибо.

+1 за такую ​​функцию. тем временем я использовал следующий «хак», чтобы заставить его работать для выбора с множественным атрибутом:

var chosen = $("#MySelect").chosen().data("chosen");
var autoClose = false;

//...

var chosen_resultSelect_fn = chosen.result_select;
chosen.result_select = function(evt) {
    var resultHighlight = null;

    if(autoClose == false)
    {
        evt["metaKey"] = true;
        evt["ctrlKey"] = true;

        resultHighlight = chosen.result_highlight;
    }

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose == false && resultHighlight != null)
        resultHighlight.addClass("result-selected");

    return result;
};

+1

+1

+1

+1

так много :+1:

Приведенный выше хак не работает. Кажется, что result_select равно undefined .
$("#inputField").chosen().result_select;
Как в v1.1.0 так и v1.0.0 .

Извините, правильный код:
$("#inputField").chosen().data("chosen").result_select

Спасибо! Это прекрасно работает. Я, наконец, получаю этот код:

$chosen = $("#myChosenField").chosen();

var chosen = $chosen.data("chosen");
var _fn = chosen.result_select;
chosen.result_select = function(evt) {    
      evt["metaKey"] = true;
      evt["ctrlKey"] = true;
      chosen.result_highlight.addClass("result-selected");
      return _fn.call(chosen, evt);
};

У меня есть динамическая страница, которая генерирует несколько полей выбора на основе пользовательского ввода. Приведенный выше код от Jarnoleconte отлично работает, за исключением случаев, когда есть пустое выделение, что выдает сообщение об ошибке в консоли:

Uncaught TypeError: невозможно прочитать свойство «result_select» неопределенного файла myfile.php

На данный момент я заключил это в оператор if:

$chosen = $("#myChosenField").chosen();

if ($("#myChosenField").length) {
  var chosen = $chosen.data("chosen");
  var _fn = chosen.result_select;
  chosen.result_select = function(evt) {    
  evt["metaKey"] = true;
  evt["ctrlKey"] = true;
  chosen.result_highlight.addClass("result-selected");
  return _fn.call(chosen, evt);
  };
}

так что, хотя на данный момент это хороший обходной путь, я также «+1» за то, что это есть в качестве опции, что-то вроде selected:stay_open и кнопка «закрыть», добавляемая в раскрывающийся список.

Код, очевидно, не будет работать, если нет окна выбора. Код, который я разместил, был упрощен, чтобы его было легче понять. Каждый может свободно интегрировать его в свои библиотеки, например, сделать оболочку или что-то в этом роде.

Для тех, кому это может быть интересно, я также хотел сохранить фильтрацию/поиск ввода текста, поэтому я добавил несколько строк в код ellekz. Кажется, хорошо работает на выбранном 1.2. Поскольку я вообще не знаю выбранного кода, пожалуйста, не стесняйтесь сообщить мне, если что-то не так.

var chosen = $(chosenSelectClass).chosen().data('chosen');
var autoClose = false;
var chosen_resultSelect_fn = chosen.result_select;
chosen.search_contains = true;

chosen.result_select = function(evt) 
{
    var resultHighlight = null;

    if(autoClose === false)
    {
        evt['metaKey'] = true;
        evt['ctrlKey'] = true;

        resultHighlight = chosen.result_highlight;
    }

    var stext = chosen.get_search_text();

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose === false && resultHighlight !== null)
        resultHighlight.addClass('result-selected');

    this.search_field.val(stext);               
    this.winnow_results();
    this.search_field_scale();

    return result;
 };

Это работает очень хорошо. Спасибо @ronanquillevere :white_check_mark:

+1

Спасибо за взлом, он действительно работает. Я удалил только this.winnow_results(); вызов, чтобы не выделять ближайший активный вариант. Теперь он выглядит более... спокойным :-)

Было бы еще лучше иметь возможность отменить выбор опций прямо из списка. Прямо сейчас они просто серые и могут быть удалены только с помощью кнопки X.

+1

+1

+1, это совершенно необходимо для раскрывающегося списка с множественным выбором.

Есть ли способ сделать исправление, опубликованное @ronanquillevere , когда на одной странице есть несколько элементов с множественным выбором?

+1

+1

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

Это было открыто с 2013 года, поэтому я просто решил использовать вместо него Select2.

+1

Для тех, кто использует angular-chosen, просто поместите код @ronanquillevere в функцию initOrUpdate в директиве angular-chosen (вам нужно будет получить исходный код вместо использования bower/npm).

Вот что я сделал:

             (function () {
                var autoClose              = false;
                var chosen_resultSelect_fn = chosen.result_select;
                chosen.search_contains     = true;
                chosen.result_select       = function (evt) {
                  var resultHighlight = null;

                  if (autoClose === false) {
                    evt['metaKey'] = true;
                    evt['ctrlKey'] = true;
                    resultHighlight = chosen.result_highlight;
                  }
                  var stext = chosen.get_search_text();
                  var result = chosen_resultSelect_fn.call(chosen, evt);

                  if (autoClose === false && resultHighlight !== null)
                    resultHighlight.addClass('result-selected');

                  this.search_field.val(stext);
                  this.winnow_results();
                  this.search_field_scale();
                  return result;
                };
              })();

+1

+1 - логично, что мультиселекты с высокой вероятностью множественного выбора будут ожидать, что окно не закроется. CMD/ctrl+щелчок — хорошая функция, но не очень хороший UX.

+1 - Недавно мы заменили старый множественный выбор на Chosen, и одна из основных жалоб, которые мы получаем от наших пользователей, заключается в том, что для выбора нескольких элементов в списке требуется больше кликов, потому что раскрывающийся список закрывается каждый раз. Как и другие, мы собираемся добавить хак, чтобы он оставался открытым по умолчанию для множественного выбора. Было бы очень хорошо, если бы это был один из вариантов.

+1

+1

+1 это жизненно важная функция. кто готов помочь с пиаром?

+1

Привет, ребята, подскажите, когда будет полноценный релиз, содержащий его? или я что-то пропустил?

Похоже, эта столь необходимая функция находится в мастере уже 3 месяца.

Как насчет нового выпуска? :) :)

Привет, я пытаюсь сохранить несколько вариантов выбора, выбранных пользователем после обновления страницы/после отображения страницы.
Я выбрал 5 нескольких районов (элементов) и основное ключевое слово для поиска. Часто я хочу искать по другому ключевому слову в одном и том же множественном выборе. Это не очень удобно, если пользователю нужно повторить несколько выборов. Я использую библиотеку Chosen Jq. Любая помощь будет оценена. --- Датта

@DATTAU , это было бы так же, как вы делаете это с обычным выбором формы.

koenpunt, можешь пояснить? Пожалуйста!

Обходной путь, если вам нужно держать его открытым полностью.
В onload вызовите это для firstopen
$("#" + selectId).trigger("chosen:open");

В selected.jquery.js есть функция:
Chosen.prototype.results_hide = function() { if (this.results_showing) { this.result_clear_highlight(); this.container.removeClass("chosen-with-drop"); this.form_field_jq.trigger("chosen:hiding_dropdown", { chosen: this }); } return this.results_showing = false; };

замените его на:
Chosen.prototype.results_hide = function() { return false; };

я делал так, поищи этот метод
Chosen.prototype.result_select
добавить еще одно условие

Chosen.prototype.result_select = function(evt) {
  ...
  if (!(this.is_multiple && (!this.hide_results_on_select || (evt.metaKey || evt.ctrlKey)))) {
    //stay open temporary solution
    if (this.max_selected_options <= 0 || (this.max_selected_options > 0 && this.max_selected_options <= this.choices_count())) {
      this.results_hide();
      this.show_search_field_default();
    }
  }
  ...
};

Не знаю, баг ли это или так было сделано. У меня есть 18 элементов в множественном выборе с помощью «Ctrl», но когда я пытаюсь выбрать 15-й элемент в списке, он автоматически прокручивается до первого невыбранного элемента. Есть ли какой-нибудь переключатель, чтобы держать открытое окно в последней позиции?

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

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

Привет всем,

Реализована ли эта функция в 2019 году? :)