Chosen: Fique aberto na seleção múltipla

A seleção permanecerá aberta se você segurar CMD ⌘ ou CTRL ao selecionar as opções. Atualmente não há opção para manter a opção de seleção por padrão.

Isso pode ser implementado de alguma forma?

Você pode dar um exemplo em que caso isso seria útil?

Na minha aplicação, tenho um formulário de pesquisa onde o usuário pode selecionar várias faixas etárias de um widget de seleção múltipla escolhido. é irritante que o menu seja fechado por uma fração de segundo e reabra novamente (porque o foco aciona o evento open).

+1

+1 - Pelo único motivo de estarmos usando Escolhido como um mecanismo de filtragem, onde o usuário final provavelmente filtrará por vários itens por categoria. A implementação atual significa que temos que incluir uma linha de texto auxiliar explicando como manter a caixa aberta em vez de apenas poder definir uma opção e mantê-la aberta pelo tempo que for necessário.

Absolutamente +1 !! Existem vários casos de uso em que a seleção deve permanecer aberta para poder selecionar várias opções. Na verdade, acho que o número de casos de uso que se beneficiariam com o select permanecendo aberto supera aqueles em que o select deveria fechar depois de escolher apenas uma opção. Desse ponto de vista, deve até ser um comportamento padrão mantê-lo aberto. Não é chamado de "select-multiple" à toa ;-) Mas uma opção de configuração para poder mantê-lo aberto seria bom o suficiente, e espero que seja implementado muito em breve.

Olá,

Alguém já deu um jeito de resolver isso?

Quando tento o seguinte também não funciona, não aciona o evento open:

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

Sr Alexandre

+1 por @geebru e @silkfire

Este é provavelmente o ponto de dor número 1 para as pessoas que usam o controle escolhido no modo múltiplo - especialmente quando há mais de 2-3 itens que precisam ser selecionados. Espero ver isso adicionado. Obrigado.

+1 para tal recurso. enquanto isso eu usei o seguinte 'hack' para fazê-lo funcionar para selects com o atributo multiple:

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

tanto :+1:

O hack acima não funciona. Parece que result_select é undefined .
$("#inputField").chosen().result_select;
Tanto em v1.1.0 quanto v1.0.0 .

Desculpe, o código correto é:
$("#inputField").chosen().data("chosen").result_select

Obrigada! Isso funciona muito bem. Eu finalmente acabo com este código:

$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);
};

Eu tenho uma página dinâmica que gera várias caixas de seleção com base na entrada do usuário. O código acima do Jarnoleconte funciona muito bem, exceto quando há uma seleção vazia, que produz uma mensagem de erro no console:

TypeError não capturado: Não é possível ler a propriedade 'result_select' de myfile.php indefinido

Por enquanto, incluí isso em uma instrução 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);
  };
}

então, embora essa seja uma boa solução alternativa por enquanto, também sou um "+1" por ter isso como uma opção, algo na linha de choose:stay_open e um botão 'fechar' sendo adicionado ao menu suspenso.

O código obviamente não funcionará se não houver uma caixa de seleção. O código que postei foi simplificado para entendê-lo mais facilmente. Todos devem se sentir à vontade para integrá-lo como quiserem em suas bibliotecas, por exemplo, fazer um wrapper ou algo assim.

Para quem pudesse se interessar, eu também queria manter a entrada de texto de filtragem/pesquisa, então adicionei algumas linhas ao código ellekz. Parece funcionar bem no 1.2 escolhido. Como eu não conheço o código escolhido, por favor, não hesite em me dizer se algo estiver errado.

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;
 };

Isso funciona muito bem. Obrigado @ronanquillevere :white_check_mark:

+1

Obrigado pelo hack, funciona de fato. Eu só removi this.winnow_results(); chamada para evitar destacar a opção ativa mais próxima. Agora parece mais... calmo :-)

Seria ainda melhor poder desmarcar opções diretamente da lista. No momento, eles estão apenas acinzentados e só podem ser removidos com o botão X.

+1

+1

+1, isso é bastante necessário para o menu suspenso de seleção múltipla.

Existe alguma maneira de corrigir a função postada pelo @ronanquillevere quando há vários elementos de seleção múltipla em uma única página?

+1

+1

+1, a principal razão para ter uma seleção múltipla é poder selecionar várias opções. Escolhido deve suportar fazer isso rápido sem ter que reabrir o menu de seleção para cada opção. Isso ajudaria especialmente com uma longa lista onde o usuário pode ter que rolar para encontrar as opções desejadas.

Isso está aberto desde 2013, então decidi usar Select2.

+1

Para aqueles que usam angular-chosen, basta colocar o código de @ronanquillevere na função initOrUpdate na diretiva angular-chosen (você terá que obter o código-fonte em vez de usar bower/npm).

Aqui está o que eu fiz:

             (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 - é lógico que multisseleções com alta probabilidade de escolhas múltiplas esperariam que a caixa não fechasse. CMD/ctrl+click é um bom recurso, mas não é um bom UX.

+1 - Substituímos recentemente uma seleção múltipla mais antiga por Escolhido e uma das principais reclamações que recebemos de nossos usuários é que são necessários mais cliques para selecionar vários itens na lista porque a lista suspensa fecha sempre. Como outros, vamos adicionar um hack para que ele permaneça aberto por padrão para seleção múltipla. Seria muito bom se essa fosse uma das opções.

+1

+1

+1 esta é uma característica vital. alguém disposto a ajudar com um PR?

+1

Oi pessoal, alguma estimativa de quando haverá um lançamento adequado que contém? ou eu perdi alguma coisa?

Parece que esse recurso tão necessário está no mestre há 3 meses.

Que tal um novo lançamento? :) :)

Oi, estou tentando manter várias seleções escolhidas pelo usuário após a atualização da página/após a renderização da página.
Estou selecionado 5 distritos múltiplos (itens) e palavra-chave principal para pesquisa. Muitas vezes, quero pesquisar com palavras-chave diferentes nas mesmas seleções múltiplas. Não é muito amigável se o usuário precisar repetir várias seleções. Estou usando Chosen Jq lib. Qualquer ajuda será apreciada. ---Dados

@DATTAU que seria da mesma maneira que você faz com seleções regulares de formulário.

koenpunt, você pode explicar? Por favor!

Solução alternativa se você precisar mantê-lo aberto todo o caminho.
No onload, chame isso para firstopen
$("#" + selectId).trigger("chosen:open");

Em choose.jquery.js existe a função:
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; };

substitua-o por:
Chosen.prototype.results_hide = function() { return false; };

eu fiz assim, procure por este método
Chosen.prototype.result_select
adicionar em outra condição

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();
    }
  }
  ...
};

Não tenho certeza se é um bug ou foi feito assim. Eu tenho 18 itens em multisseleção com "Ctrl", mas quando estou tentando selecionar o 15º elemento da lista, ele está rolando automaticamente para o primeiro item não selecionado. Existe algum interruptor para manter a janela aberta na última posição?

Eu usei o hack do HarrisRobin e está funcionando bem com o primeiro select. Eu usei vários números de caixa de seleção usando escolhido, mas este hack não está funcionando com a caixa de seleção restante do que o primeiro. Alguém por favor me ajudaria?

Eu testei os trechos de código nesta página e eles parecem redefinir o texto padrão para "Selecionar algumas opções", eles também não funcionam com várias seleções múltiplas na mesma página. Este seria um bom recurso para que não tenhamos que instruir nossos usuários a manter pressionada uma tecla modificadora.

Olá a todos,

Esse recurso está implementado agora em 2019? :)