Chosen: html5 soporte de atributo requerido?

@Aharito ¿No solucionaremos el problema del orden de tabulación con esto?

Gracias @Aharito , está funcionando muy bien con la v1.1.0 elegida, solo reemplace $('select.chzn') con $('.chosen-select') .

Pensé que probé ese truco de clip: rect, y encontré algún problema con él. ¿Quizás con un navegador más antiguo? Supongo que si está funcionando ahora, eso es genial.

Creo que también puede haber problemas con las pestañas con mi solución (no puedo recordar, ha pasado un tiempo); reduje el impacto aplicando el parche solo a los campos que presentan el atributo requerido.

Hemos estandarizado esto en todas las llamadas a $().chosen()

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !options || _.isObject(options)

  if (is_creating_chosen && select.css('position') === 'absolute') {
    // if we are creating a chosen and the select already has the appropriate styles added
    // we remove those (so that the select hasn't got a crazy width), then create the chosen
    // then we re-add them later
    select.removeAttr('style')
  }

  var ret = select.oldChosen(options)

  if (is_creating_chosen) {
    // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
    // only do this if we are initializing chosen (no params, or object params) not calling a method
    select.attr('style','display:visible; position:absolute; clip:rect(0,0,0,0)');
  }
  return ret
}

@ghiculescu Eso no resuelve el problema de tabular o desplazar-tabular en la selección, ¿verdad?

@DASPRiD nop .

¿Qué pasa con esto como una posible solución de encubrimiento?

no es perfecto, pero de hecho, evita que aparezca la selección original pasando el foco al siguiente cuadro de diálogo elegido, pero tal vez sea un paso más cerca

"elegido-seleccionar" es solo un selector para las selecciones que tengo con una clase en particular, no estoy seguro de si el "enfoque de clic" cubre todos los eventos respectivos a los que debería engancharme, pero tal vez alguien pueda decir qué más falta.

También es posible que haya entendido mal algo sobre la estructura html elegida y descubra que ("a") es demasiado liberal, ¿alguien tiene más experiencia?

$(".chosen-select").on("click focus",function(event){
    $(this).next(".chosen-container").find("a").trigger(event.type);
});

oh, y seguramente " display: visible " debería ser " display: block " o algo así? causa v isibilidad: visible es válido, pero display: visible Estoy seguro de que no

Lo que encontré es que si tiene varias selecciones una al lado de la otra en el mismo contenedor, esto las desplaza todas a la ubicación incorrecta, por lo que la posición: absoluta hace que el mensaje de validación aparezca en la posición incorrecta.

Resolví esto separando y volviendo a colocar en el contenedor elegido, así

$(".chosen-select").each(function(){
    $(this).next(".chosen-container").prepend($(this).detach());
});

la solución anterior, después de más investigación, muestra que deshabilita la tabulación a través de los campos por completo y no puedo resolver el problema, sin embargo, elimina el problema de la selección que aparece cuando estás tabulando, así que eso es más problema importante en mi mente, puedo vivir sin tabular si puedo tenerlo para que no rompa la pantalla, ya que más personas están usando dispositivos móviles y no están tabulando de todos modos, solo afecta a los usuarios de escritorio, sigue siendo importante, pero relativamente hablando, manejable.

sin embargo, si alguien resuelve eso de alguna manera, estoy muy interesado en averiguarlo.

ok, más allá de lo que estaba intentando antes, encontré que los eventos elegidos estaban usando y decidí que cuando hiciera cualquier evento en la selección ahora oculta, podría secuestrarlo y activar un evento elegido para abrirlo.

Creo que funciona muy bien.

$(".chosen-select").each(function(){
    //    take each select and put it as a child of the chosen container
    //    this mean it'll position any validation messages correctly
    $(this).next(".chosen-container").prepend($(this).detach());

    //    apply all the styles, personally, I've added this to my stylesheet
    $(this).attr("style","display:block!important; position:absolute; clip:rect(0,0,0,0)");

    //    to all of these events, trigger the chosen to open and receive focus
    $(this).on("click focus keyup",function(event){
        $(this).closest(".chosen-container").trigger("mousedown.chosen");
    });
});

Creo que esta es la mejor versión que tengo hasta ahora. Afortunadamente, esto resuelve el problema de tabulación hacia adelante, todavía existe la tabulación inversa, no puede tabular hacia atrás a través de una selección elegida porque en el momento en que tabula en el elemento de selección, inmediatamente vuelve a enfocarse en el contenedor elegido, lo que significa que ' estar atrapado en solo poder tabular hacia adelante.

Podría ser una idea realizar un seguimiento del elemento anterior y si el elemento que anteriormente tenía el foco de pestaña estaba delante del elemento enfocado actual, irá hacia atrás, luego salte apropiadamente el reenfoque al elegido y seleccione la pestaña anterior, pero No estoy seguro de cómo hacer eso.

Después de una lectura muy larga, pensé haber probado las sugerencias presentadas a lo largo de los años.

Desafortunadamente, no pude hacer funcionar el código de @christhomas . Lo invoco dentro de una función de envío sin resultados visibles (tampoco errores).

La buena noticia es que la nueva función de @ghiculescu funciona como un regalo, ya que todavía puedo usar el archivo CDN elegido y solo usar la función en mi archivo js.

@DASPRiD @charettes ¿qué quiere decir que la pestaña no funciona con la función modificada? Parece estar funcionando para mí

Bastante fácil agregar tabindex: -1 a la selección del fragmento de @ghiculescu , resolviendo el problema de tabulación.

Ejemplo: http://jsfiddle.net/hq7b426j/

¡Ahora podía ver el problema! Tu adición funciona muy bien @andreialecu

Por cierto, se necesitaba otra adición. En iPhone u otros dispositivos no compatibles, el violín no funcionaría correctamente. Chosen se deshabilita en iPhone y deja el <select> sin cambios, y el código en el violín de arriba lo escondería, sin dejar ninguna forma de interactuar con el seleccionado.

Este violín lo corrige (agregando una pantalla: ninguna verificación):
http://jsfiddle.net/hq7b426j/1/

¡¡Ah, eso es aún mejor !! ¡Gracias! Todavía estoy probando también, pero publicaré si surge algo más

@CaptainN, por favor, informe que tengo el mismo problema. wr necesito poner ese código. estoy usando el tema inspina de wrapbootstrap.

@ vidhyaprakash85 No estoy seguro de lo que quieres decir. Me había bifurcado hace mucho tiempo y escribí una solicitud de extracción (n. ° 900), pero los repositorios no están sincronizados ahora y mi bifurcación está muy desactualizada. Puede encontrarlo aquí si le ayuda: https://github.com/adcSTUDIO/chosen

ya estoy usando https://github.com/harvesthq/chosen cómo hacer eso :(

@andreialecu ¡ tu código funciona bien! ¡¡¡Gracias!!!

Gracias @christhomas, tu código funcionó muy bien: bailarina:

Ni @christhomas ni @ghiculescu funcionaron para mí usando una selección de varios

Cuando probé el parche @ghiculescu , funcionó, excepto que se mostraba un desplazamiento todo el tiempo, debajo del cuadro de selección.
Cuando probé el parche @christhomas , apareció la ventana emergente sin que se abriera el cuadro de búsqueda.

Tuve que modificar el script de

target.find('select')
        .chosen('destroy')
        .chosen({disable_search_threshold: 10})

De lo contrario, el segundo viaje eliminó el estilo que se agregó en el primero:

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !!options

    var style = 'display:visible; position:absolute; clip:rect(0,0,0,0);'

        if (is_creating_chosen && select.css('position') === 'absolute' && select.attr('style') != style) {
            // if we are creating a chosen and the select already has the appropriate styles added
            // we remove those (so that the select hasn't got a crazy width), then create the chosen
            // then we re-add them later
            select.removeAttr('style')
        }

        var ret = select.oldChosen(options)

        // only act if the select has display: none, otherwise chosen is unsupported (iPhone, etc)
        if (is_creating_chosen && select.css('display') === 'none') {
            // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
            // only do this if we are initializing chosen (no params, or object params) not calling a method
            select.attr('style', style);
            select.attr('tabindex', -1);
        }
        return ret
}

Acabo de agregar esta condición adicional al primero si: && select.attr('style') != style

@doganmeh Funciona muy bien en Chrome y dispositivos móviles (con Chrome) pero probado en Firefox 53.0 donde no funciona

Incluso este http://jsfiddle.net/hq7b426j/1/ no funciona en Firefox 53.0

Hmmm, pero esto parece más un problema de Firefox porque si hace clic en el botón más veces, verá que Firefox intenta mostrar el mensaje (pero nunca se procesa por completo)

He usado esta solución. Es muy simple y funciona perfecto:

<style>
    select.submitted:invalid + .chosen-container{
        border-color: red !important;
    }
</style>

$('#yourSelector').chosen({
                no_results_text: "yourText",
                disable_search_threshold: 9,
                search_contains: true
                //your parameters
    }).on('invalid', function(){
        $(this).addClass('submitted');
    });

parece que esto no funciona si ha elegido con múltiples selecciones:
http://jsfiddle.net/jeromax/o5a8aogh/

Lo arreglé.

'
$ .fn.oldChosen = $ .fn.chosen
$ .fn.chosen = function (opciones) {
var select = $ (esto),
is_creating_chosen = !! opciones;

if (is_creating_chosen && select.css ('posición') === 'absoluta') {
// si estamos creando un elegido y el seleccionado ya tiene los estilos apropiados agregados
// los eliminamos (para que la selección no tenga un ancho loco), luego creamos el elegido
// luego los volvemos a agregar más tarde
select.removeAttr ('estilo');
}

var ret = select.oldChosen (opciones)

// solo actúa si la selección tiene pantalla: ninguna, de lo contrario, la opción elegida no es compatible (iPhone, etc.)
if (is_creating_chosen && select.css ('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
// solo hacemos esto si estamos inicializando elegido (sin parámetros, o parámetros de objeto) sin llamar a un método

  $(this).each(function(index){
      if($(this)[0].multiple==true){
          $(this).attr('style','display:visible; width:0px; height:0px; margin-top:25px; position:absolute; clip:rect(0,0,0,0)');
      }else{
          $(this).attr("style","display:visible; position:absolute; clip:rect(0,0,0,0)");
      }
  })

select.attr ('tabindex', -2);

}
volver ret
}
'

+1

¿Alguien puede arreglar esto? Es un problema bastante antiguo y una funcionalidad muy importante hoy en día. Gracias.

No funciona en la última versión.

Esto parece estar rompiendo la validación del formulario angular.js cuando se usa también angular-elegido.

Es 2018 y seguimos teniendo el mismo problema. Es un infierno cómo los estándares HTML no pueden funcionar correctamente e integrarse con complementos externos. Tiempos locos :)

Esto también está rompiendo el complemento elegido por Drupal. Ver https://www.drupal.org/project/chosen/issues/2705891

No se pudo encontrar ninguna solución adecuada para esto que no sea una solución alternativa:

<div class="form__select">
  <select class="chosen">
    <!-- options -->
  </select>
</div>

.form__select {
    position: relative;
}

.form__select .chosen {
    display: block !important;
    height: 0;

    position: absolute;
    left: 35px;
    bottom: 0;

    outline: none;
    border-color: white;

    pointer-events: none;
}

Si está usando Elegido para todos los elementos select , puede usar este CSS para cambiarlo y hacerlo visible (para DOM), pero sin opacidad, altura, posición absoluta.

Estos selectores de CSS apuntan a elementos de selección no válidos, y uno de ellos apunta a multiple añadiendo un 15px margin-top para centrarlo en los elementos de selección múltiple.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
   margin-top: 15px !important;
}

Demostración: http://jsfiddle.net/tripflex/2zdeu9oc/

PERO REALMENTE ... esto ya debería ser manejado por la lib Chosen.JS

Aquí está mi solución alternativa, si es de alguna utilidad:

// Initialise Chosen
$(function () {
    $('select').chosen();
});

// Place the original input behind the Chosen input, matching the height and width so that the warning appears in the correct position
$('select').on('chosen:ready', function () {
    const height = $(this).next('.chosen-container').height();
    const width = $(this).next('.chosen-container').width();

    $(this).css({
            'position': 'absolute',
            'height': height,
            'width': width,
            'opacity': 0
        })
        .show();
});

@jonathanbull ¿puedes mostrarlo dentro de contexto? Probé tu solución y no funcionó.

@AndrewSouthpaw Este es mi código, las correcciones funcionan bien para mí :)

$("#select").val([]); // disable default selection by browser
$('#select').on('chosen:ready', function(evt, params, chosen) {
    $(this).css({'position': 'absolute', 'height': 0, 'opacity': 0}).show();
});
$("#select").chosen();

Estoy usando un código ligeramente diferente (basado en el código aquí):

$('.chosen-select').on("chosen:ready", function (evt, data) {
  $(this)
    .addClass('chosen_hidden')
    .attr('tabindex', '-1')
    .prependTo(data.chosen.container)
    .show()
  })
  .chosen({width: '100%'})

.chosen_hidden {
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 100%; // required for IE 10
  // **not required** opacity: 0;
}

No maneja la acción 'destruir', pero coloca bien el mensaje de error y parece funcionar en Firefox y Chromiun. Como el selector original no está oculto, el borde resaltado de error es visible. Actualización : con max-height también funciona en IE. Otra actualización : agregue tabindex -1 para asegurarse de que no reciba el foco. (sin dejar de ser enfocable y recibir mensajes de error).

Ha habido un PR abierto que resuelve esto, pero creo que se perdió ya que el otro hilo al que apuntaba se cerró. Ver # 2594

A @jhedstrom le encantaría que se fusionara. ¿Sabes si esta biblioteca todavía se mantiene?

Usé algo similar a la solución de

https://github.com/harvesthq/chosen/pull/2594#issuecomment -714806139

¡Gracias @jhedstrom por señalarme en la dirección correcta!