Chosen: Manténgase abierto en la selección múltiple

La selección permanecerá abierta si mantienes CMD ⌘ o CTRL al seleccionar opciones. Actualmente no hay opción para mantener la opción de selección por defecto.

¿Se puede implementar esto de alguna manera?

¿Puede dar un ejemplo en qué caso esto sería útil?

En mi aplicación tengo un formulario de búsqueda en el que el usuario puede seleccionar varios grupos de edad desde un widget de selección múltiple Elegido. es molesto que el menú se cierre por una fracción de segundo y luego se vuelva a abrir (porque el enfoque activa el evento abierto).

+1

+1: por la única razón de que estamos usando Chosen como un mecanismo de filtrado en el que el usuario final probablemente filtrará por varios elementos por categoría. La implementación actual significa que tenemos que incluir una línea auxiliar de texto que explique cómo mantener el cuadro abierto en lugar de solo poder establecer una opción y mantenerlo abierto todo el tiempo que sea necesario.

¡¡Absolutamente +1!! Hay toneladas de casos de uso en los que la selección debe permanecer abierta para poder seleccionar múltiples opciones. De hecho, creo que la cantidad de casos de uso que se beneficiarían de que la selección permanezca abierta supera a aquellos en los que la selección debería cerrarse después de elegir solo una opción. Desde ese punto de vista, incluso debería ser un comportamiento predeterminado mantenerlo abierto. No se llama "select-multiple" por nada ;-) Pero una opción de configuración para poder mantenerlo abierto sería lo suficientemente bueno, y espero que se implemente muy pronto.

Hola,

¿Alguien ha encontrado una manera de resolver esto?

Cuando intento lo siguiente tampoco funciona, no dispara el evento open:

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

señor alejandro

+1 por @geebru y @silkfire

Este es probablemente el principal problema para las personas que usan el control elegido en modo múltiple, especialmente cuando hay más de 2 o 3 elementos que deben seleccionarse. Espero ver esto agregado. Gracias.

+1 para tal característica. Mientras tanto, utilicé el siguiente 'truco' para que funcione para selecciones con el atributo múltiple:

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

mucho :+1:

El truco anterior no funciona. Parece que result_select es undefined .
$("#inputField").chosen().result_select;
Tanto en v1.1.0 como v1.0.0 .

Lo siento, el código correcto es:
$("#inputField").chosen().data("chosen").result_select

¡Gracias! Esto funciona muy bien. Finalmente termino con 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);
};

Tengo una página dinámica que genera múltiples cuadros de selección basados ​​en la entrada del usuario. El código anterior de Jarnoleconte funciona muy bien, excepto cuando hay una selección vacía, lo que genera un mensaje de error en la consola:

TypeError no capturado: no se puede leer la propiedad 'result_select' de myfile.php no definido

Por el momento, he incluido esto en una declaración 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);
  };
}

así que, si bien esta es una buena solución por el momento, también soy un "+1" por tener esto como una opción, algo similar a elegido: permanecer_abierto y un botón "cerrar" que se agrega al menú desplegable.

Obviamente, el código no funcionará si no hay un cuadro de selección. El código que publiqué fue simplificado para entenderlo más fácilmente. Todo el mundo debería sentirse libre de integrarlo como quiera en sus bibliotecas, por ejemplo, hacer un envoltorio o algo así.

Para aquellos que puedan estar interesados, también quería mantener la entrada de texto de filtrado/búsqueda, así que agregué algunas líneas al código de ellekz. Parece funcionar bien en el 1.2 elegido. Como no conozco el código elegido en absoluto, no dude en decirme si algo está mal.

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

Eso funciona muy bien. Gracias @ronanquillevere :white_check_mark:

+1

Gracias por el truco, de hecho funciona. Solo eliminé this.winnow_results(); llamada para evitar resaltar la opción activa más cercana. Ahora parece más... tranquilo :-)

Sería aún mejor poder anular la selección de opciones directamente de la lista. En este momento, solo están atenuados y solo se pueden eliminar con el botón X.

+1

+1

+1, esto es bastante necesario para el menú desplegable de selección múltiple.

¿Hay alguna forma de corregir la función publicada por @ronanquillevere cuando hay varios elementos de selección múltiple en una sola página?

+1

+1

+1, la razón principal para tener una selección múltiple es poder seleccionar múltiples opciones. Chosen debería admitir hacer esto rápido sin tener que volver a abrir el menú de selección para cada opción. Esto ayudaría especialmente con la lista larga en la que el usuario puede tener que desplazarse para encontrar las opciones deseadas.

Esto ha estado abierto desde 2013, así que decidí usar Select2 en su lugar.

+1

Para aquellos que usan angular-chosen, simplemente coloque el código de @ronanquillevere en la función initOrUpdate en la directiva angular-chosen (tendrá que obtener el código fuente en lugar de usar bower/npm).

Aquí esta lo que hice:

             (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: es lógico que las selecciones múltiples con alta probabilidad de opciones múltiples esperen que la caja no se cierre. CMD/ctrl+clic es una buena función, pero no es una buena experiencia de usuario.

+1: recientemente reemplazamos una selección múltiple anterior con Chosen y una de las principales quejas que recibimos de nuestros usuarios es que se necesitan más clics para seleccionar varios elementos en la lista porque el menú desplegable se cierra cada vez. Al igual que otros, vamos a agregar un truco para que permanezca abierto de forma predeterminada para la selección múltiple. Sería muy bueno si esa fuera una de las opciones.

+1

+1

+1 esta es una característica vital. alguien dispuesto a ayudar con un PR?

+1

Hola chicos, ¿alguna estimación de cuándo habrá un lanzamiento adecuado que lo contenga? o me perdí de algo?

Parece que esta característica tan necesaria ha estado en el maestro durante 3 meses.

¿Qué tal un nuevo lanzamiento? :) :)

Hola, estoy tratando de mantener varias selecciones elegidas por el usuario después de actualizar la página/después de que se represente la página.
Me seleccionaron 5 distritos múltiples (artículos) y la palabra clave principal para la búsqueda. A menudo quiero buscar con diferentes palabras clave dentro de las mismas selecciones múltiples. No es muy fácil de usar si el usuario necesita repetir selecciones múltiples. Estoy usando Chosen Jq lib. Cualquier ayuda será apreciada. ---Datos

@DATTAU eso sería de la misma manera que lo hace con las selecciones de formulario regulares.

koenpunt, ¿puedes explicarlo? ¡Por favor!

Solución alternativa si necesita mantenerlo abierto todo el camino.
En onload, llame a esto para firstopen
$("#" + selectId).trigger("chosen:open");

En elegido.jquery.js hay una función:
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; };

reemplazarlo con:
Chosen.prototype.results_hide = function() { return false; };

lo hice así, busca este método
Chosen.prototype.result_select
añadir en otra condición

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

No estoy seguro si es un error o se hizo así. Tengo 18 elementos en selección múltiple con "Ctrl", pero cuando trato de seleccionar el elemento número 15 en la lista, se desplaza automáticamente al primer elemento no seleccionado. ¿Hay algún interruptor para mantener la ventana abierta en la última posición?

He usado el truco de HarrisRobin y funciona bien con la primera selección. He usado varios números de cuadros de selección usando el elegido, pero este truco no funciona con el resto del cuadro de selección que el primero. ¿Alguien por favor me ayuda?

He probado los fragmentos de código en esta página y parecen restablecer el texto predeterminado a "Seleccionar algunas opciones", tampoco funcionan con múltiples selecciones múltiples en la misma página. Esta sería una buena característica para no tener que indicar a nuestros usuarios que mantengan presionada una tecla modificadora.

Hola a todos,

¿Esta característica está implementada ahora en 2019? :)