Chosen: Hacer que se pueda hacer clic en las etiquetas de optgroup

Esto será útil, pero standart html-select no lo permite.

@ Fr3nzzy : sí, pero si fuera opcional, esto no sería un problema, ¿verdad?

@ Fr3nzzy : si se me permite, html-select estándar tampoco permite realizar búsquedas ... sin embargo, es muy conveniente, y por eso Chosen es genial: mejora la selección estándar. Supongo que podríamos aplicar el mismo razonamiento aquí.

@ greg0ire : +1, también estoy buscando esto: o)

@ pilap82 Sin embargo, select admite la búsqueda de un elemento escribiendo su nombre.

lo suficientemente justo :)

Quizás no sea el mejor lugar para un parche, pero espero que pueda ayudar:

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

Esta es una gran idea. Estoy dispuesto a enviar una solicitud de extracción si el equipo central está dispuesto a fusionarlo. ¿Qué opinas @pfiller?

muestra de lote seleccionar con elegido:

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

¡Bien hecho!

Me gustaría ver que esto se agregue a Chosen, pero la escucha de eventos debería agregarse de una manera menos intensiva. La solución de @adriengibrat aplica un oyente a cada grupo que no funciona tan bien si hay cientos de grupos. Ya tenemos un evento de clic en el div de resultados de búsqueda que se puede probar con grupos de opciones. Si se establece la opción, se debe usar css para cambiar el color de fondo.

+1. Estaba pensando que cuando se selecciona el optgroup, (opcionalmente) deshabilitaría / ocultaría todos sus elementos secundarios.

+1 para esta función

@pfiller ¿ alguna actualización sobre esta o la rama search_improvements? Me encantaría verlo fusionado con el maestro.

También necesito grupos seleccionables. Originalmente intenté cambiar el código, luego me inspiré en la respuesta que se ofrece a menudo para "omitir el grupo de opciones y agregar espacios para sangrar los subelementos". Eso se veía horrible, pero dado que Chosen está muy bien diseñado por CSS ... ¿qué tal si usamos una selección que no sea de optgroup y use una clase en cada opción para que parezca una pantalla agrupada?

Puedes ver una versión básica en este violín: http://jsfiddle.net/slothbear/9xqpF/

No dediqué mucho tiempo al estilo, pero entenderás la idea. Esto proporciona dos funciones que necesito: optgroups seleccionables y optgroups buscables. Todo sin optgroups.

Estoy cerca de seguir adelante con esta técnica en mi proyecto, pero estoy buscando comentarios. Parece funcionar. ¿Puedes pensar en una forma mejor? ¿O alguna trampa?

_Me acabo de dar cuenta de que probablemente debería mencionar que el violín está usando la bifurcación Koenpunt de Chosen, para habilitar la opción de agregar. Pero no creo que eso afecte a este ejemplo.

_También busco orientación. Sé que esta técnica probablemente esté bastante lejos de la Filosofía Elegida para ceñirse a las características select , pero si una opción es apropiada para esta característica, estaré feliz de hacer el trabajo.

+1 para esta función, encontré elegido mientras buscaba una forma de respaldar esto

(Estaba buscando poder seleccionar un título de grupo O seleccionar un elemento de grupo) según Slothbear's anterior

Editar: Al final emulé esto haciendo lo siguiente.
Tenga en cuenta las clases, también agregué .clickable al css que coloca el cursor en un puntero.

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

Esta es mi solución. Aunque es específico para mis necesidades, uno puede modificarlo fácilmente y cambiarlo según sus necesidades.

Ejemplo:
carros
-coche1
-car2
-car3
plano
-plano1
-plane2

Lo que hice fue crear una nueva opción al principio de todos los grupos, de esa manera, las opciones de 'Todos' vendrán justo después de los grupos:
carros
-Todos los carros
-coche1
-car2
-car3
gente
-Todos
-persona1
-persona2

En 'results_option_build', pase la opción 'All' a 'result_add_group' como segundo parámetro cuando los datos sean un grupo, y omita la opción 'All' en la siguiente iteración:

if (grupo de datos) {
contenido + = this.result_add_group (datos, _ref [++ _ i])

Ahora, vayamos a 'result_add_group' y reemplacemos el grupo con la opción que pasamos, pero mantengamos el estilo del grupo:
result_add_group = function (grupo, opción) {
.
.
regreso "

Eso es todo .. Si lo desea, cambie el cursor a puntero en css.

Ninguno de estos parece tener en cuenta la capacidad de búsqueda. De forma predeterminada en elegido, si busca una opción, también mostrará la etiqueta del grupo. Este método no lo hace, si tengo varios grupos y tienen opciones idénticas, esto hará que termine con una lista de elementos visualmente idénticos.

Sería muy interesante que se integrara como opción en la biblioteca, ya que facilitaría la gestión de múltiples selecciones. ¿Te has referido a apretar en alguna versión? un saludo

Tengo esto implementado solo usando javascript, es una solución temporal. Sin embargo, no lo uso para selecciones múltiples, lo uso para agrupaciones personalizadas. Terminé haciendo que los grupos fueran opciones pero parecieran grupos, y le di a las palabras clave 'grupos' que cuando haces una búsqueda de la subopción, el grupo se mostrará como lo haría normalmente en elegido.js http: // stackoverflow. com / q / 22336052/744228

Agregué esto a mi copia local de elegido porque era un requisito para mi proyecto. Al final fue bastante fácil.

En la función set_default_values pongo this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; al final.

Luego en result_add_group cambié las clases asignadas al grupo para que sean

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

Y por último, pero no menos importante, en result_select un pequeño truco y agregado

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

justo antes
item = this.results_data[high[0].getAttribute("data-option-array-index")];

Vea el código completo en 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);
}

Un poco tarde para la fiesta, pero: ¡+1 para esta función!

@ruhley +1 para su solución, ¡funciona como un encanto!
Solo un pequeño detalle que está en la página de códigos completa pero no en el segmento de código: hay un
demás{
falta al final.

Hola,
Gracias @ruhley por tu código.
Pero con sus modificaciones, el grupo no se deshabilita después de hacer clic y se puede volver a seleccionar.

Aquí están mis mejoras (basadas en 1.4.2 elegido):

• Después de la línea 158, en la función "set_default_values", agregue:

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

_Adición del parámetro_

• Cambie la línea 222, en la función "results_option_build", con:

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

_Dar a los niños la función "result_add_group" ._

• Cambie la línea 272, nueva definición de la función "result_add_group", con:

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

_Para recibir a los niños_

• Después de la línea 285 ( group_el = document.createElement("li"); ), en la función "result_add_group", agregue:

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

_Esto hace que se pueda hacer clic en el grupo si no se selecciona al menos un niño. (esta parte es mejorable debido a la variable "todos") ._

• Después de la línea 1052 ( high.addClass("result-selected"); ), en la función "result_select", agregue:

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 {

_Esto solo agrega niños no seleccionados_

• Después de la línea 1083, en la función "result_select":

}

_Necesito cerrar la condición de un grupo en el que se hizo clic ._

No olvide sangrar correctamente ese fragmento de código;)

Aquí hay una versión completa de mi archivo: https://gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
Aquí hay una diferencia (1 año disponible): https://www.diffnow.com/?report=8zhe9
Divertirse

¿Esto todavía no se ha implementado?

@GuillaumeSTEIN Probé su script de versión completa, nada parece cambiar.
¿Necesito agregar algunos parámetros o clases especiales a HTML para que funcione?
¿Quizás puedas hacer un ejemplo funcional en http://codepen.io/ o jsfiddle?

Sí, debe establecer la opción: group_selectable en verdadero para activar esta función

gracias @GuillaumeSTEIN , funcionó, pero lo que extraño del script @adriengibrat es resaltar todas las opciones en el grupo actual.

los grupos seleccionados tienen una clase de "resultado seleccionado".
Puedes hacer algo de CSS. Esto es lo que he escrito, es posible que deba adaptarlo a sus necesidades:

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

Lo apuñalé # 2678

¡Esta sería una característica muy útil! ¡Me encantaría verlo implementado!

+1 para esta función.

Si alguien encuentra esto útil, tomo @slothbear jsfiddle y lo mejoro con:

• Botón "Borrar todo"
• Al seleccionar el elemento de la categoría raíz, se deshabilita y se anula la selección de los niños. Por qué ? En mi caso, usaría elegido para generar un filtro de jerarquía, donde la selección de un nodo padre implica que buscaría en cada categoría de niños, y no deseamos contaminar la interfaz de usuario poniendo a todos los niños como seleccionados.

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

Acabo de actualizar a 1.8.3 elegido para que los resultados permanezcan abiertos después de seleccionar un resultado en una selección múltiple (agregado en la versión 1.7.0). Gran característica, me alegro de que se haya agregado. Sin embargo, había estado usando 1.6.1 y usé el código aquí para permitir que se agregue un grupo completo al hacer clic en el nombre del grupo: http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- plugin-jquery-elegido /

Ese código ha funcionado muy bien, hasta ahora. El uso de 1.8.3 y hide_results_on_ select: false hace que algo se rompa y solo selecciona la opción de resultado resaltada actualmente. Cuando se elimina esa línea (volviendo a establecer el valor predeterminado de verdadero, ocultar al seleccionar), funciona bien y selecciona todas las opciones de resultados del grupo. Entonces, algo en hide_results_on_ select: false está rompiendo / interfiriendo con la capacidad de reunir todos los no .result-seleccionados en un .group-result. Sacrificar esta habilidad por la nueva función es brutal.

Revisaré todos los comentarios anteriores para ver si esto se ha abordado como un defecto de la nueva función, pero no puedo decir qué versión están usando las personas cuando están probando esto.

¿Algunas ideas?

okey. he tenido suficiente. "actualizar" a 1.8.3 no ha sido más que un juego de golpear un topo durante la última semana. problemas de CSS, problemas de actividad inesperados, etc.Me actualicé para obtener los resultados de mantener abiertos en la función de selección múltiple (que tomó años implementar en primer lugar), pero descubrí que siempre salta a la cima cuando se seleccionan los resultados, así que qué bueno es eso - todo eso esperando por nada. el rendimiento en una sola selección con muchas opciones se ha ralentizado de alguna manera. y más problemas, demasiados para enumerarlos aquí. Buen trabajo manteniendo esto funcionando durante tantos años, lo he disfrutado. pero las mejoras tuvieron el costo de degradar la experiencia del usuario y no puedo tener eso. Estoy investigando cómo sacar el elegido y usar select2. es 2018, hora de encontrar una herramienta selecta que se mantenga al día con las expectativas de los usuarios, que cada vez son más difíciles de cumplir. lo siento y gracias

Me mudé a select2 también, pero no me volví a elegir antes de eso. Tienes una forma extraña de decir "gracias".

Hola,
Si desea utilizar optgroup y poder hacer clic en él y agregar automáticamente todas las opciones de ese grupo, simplemente agregue esto a su javascript: (el activador del evento ".group-result" puede ser más restrictivo)

Estoy seguro de que esto se puede agregar a la clase AbstractChosen, con algo como 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');
});

Hice uso de bootstrap-select y también estaba luchando por encontrar algo para poder hacer clic en el optgroup y seleccionar todos sus elementos.Este enlace realmente funcionó para mí, espero que ayude: https://stackoverflow.com/questions/41821115 / select-deselect-optgroup-based-on-option-select-in-select-picker-boostrap