Chosen: html5 requer suporte a atributos?

@Aharito Não vamos resolver o problema de ordem de tabulação ao fazer isso?

Obrigado @Aharito , está funcionando muito bem com a v1.1.0 escolhida, basta substituir $('select.chzn') por $('.chosen-select') .

Pensei ter tentado aquele truque do clipe: rect, e encontrei algum problema com ele. Talvez com um navegador mais antigo? Acho que está funcionando agora, ótimo.

Acho que também pode haver problemas de tabulação com a minha solução (não me lembro, já faz um tempo) - reduzi o impacto aplicando apenas o patch aos campos que apresentam o atributo obrigatório.

Padronizamos isso em todas as chamadas para $().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 Isso não resolve o problema de tabulação ou shift-tab no select, resolve?

@DASPRiD não .

que tal isso como uma possível solução de encobrimento.

não é perfeito, mas, na verdade, impede que a seleção original apareça passando o foco para a próxima caixa de diálogo escolhida, mas talvez seja um passo mais perto

"escolhido-selecionar" é apenas um seletor para as seleções que tenho com uma classe em particular, não tenho certeza se "clique em foco" cobre todos os respectivos eventos que devo conectar, mas talvez alguém possa dizer o que mais está faltando?

também é possível que eu não tenha entendido algo sobre a estrutura html escolhida e find ("a") seja muito liberal, alguém tem mais experiência?

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

oh, e certamente " display: visible " deveria ser " display: block " ou algo assim? causa visibilidade: visível é válido, mas exibição: visível Tenho certeza que não

o que descobri é que se você tiver vários selects próximos um do outro no mesmo contêiner, isso os desloca todos para o local errado, então a posição: absoluto faz com que a mensagem de validação apareça na posição errada.

Resolvi isso desanexando e recolocando no recipiente escolhido, assim

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

a solução acima, após mais investigação, mostra que desativa a tabulação pelos campos completamente e não consigo resolver o problema, no entanto, elimina o problema do select aparecer quando você está tabulando, então é mais problema importante na minha mente, posso viver sem tabulação se puder para não quebrar a tela, visto que mais pessoas estão usando dispositivos móveis e não estão tabulando de qualquer maneira, isso afeta apenas usuários de desktop, ainda importante, mas relativamente falando, gerenciável.

no entanto, se alguém resolver isso de alguma forma, estou muito interessado em descobrir.

ok, então, além do que estava tentando antes, descobri que os eventos escolhidos estavam usando e decidi que quando fizesse qualquer evento no select agora oculto, poderia sequestrá-lo e acionar um evento escolhido para abri-lo.

eu acho que funciona bem.

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

Acho que esta é a melhor versão que tenho até agora. Felizmente, isso resolve o problema da tabulação para frente, ainda há a tabulação reversa, você não pode alternar para trás em uma seleção escolhida porque, no segundo que você tabular no elemento de seleção, você imediatamente refocaliza no contêiner escolhido novamente, o que significa que você ' está preso em apenas ser capaz de avançar com tabulação.

Pode ser uma ideia manter o controle do elemento anterior e se o elemento que anteriormente tinha o foco da guia estava na frente do elemento em foco atual, você está retrocedendo e, em seguida, pule o redirecionamento para o escolhido e selecione a guia anterior, mas não tenho certeza de como fazer isso.

Depois de uma longa leitura, pensei ter experimentado as sugestões apresentadas ao longo dos anos.

Infelizmente, não consegui fazer o código do @christhomas funcionar. Eu o invoco em uma função de envio sem resultados visíveis (sem erros também).

A boa notícia é que a nova função de @ghiculescu funciona como uma delícia, pois ainda posso usar o arquivo CDN escolhido e apenas usar a função no meu arquivo js.

@DASPRiD @charettes o que você quer dizer com guia não funciona com a função modificada? Parece estar funcionando para mim

Fácil de adicionar tabindex: -1 para selecionar o snippet de @ghiculescu , resolvendo o problema de tabulação.

Exemplo: http://jsfiddle.net/hq7b426j/

Eu pude ver o problema agora! Sua adição funciona muito bem @andreialecu

Havia uma outra adição necessária a propósito. No iPhone ou em outros dispositivos sem suporte, o violino não funcionava corretamente. Chosen se desativa no iPhone e deixa <select> inalterado, e o código no violino acima iria ocultá-lo, não deixando nenhuma maneira de interagir com o select.

Este violino corrige isso (adicionando um display: none check):
http://jsfiddle.net/hq7b426j/1/

Ah isso é ainda melhor !! Obrigado! Ainda estou testando também, mas postarei se algo mais surgir

@CaptainN informe que tenho o mesmo problema. wr eu preciso colocar esse código. Estou usando o tema inspina do wrapbootstrap.

@ vidhyaprakash85 Não tenho certeza do que você quer dizer. Eu tinha feito o fork há muito tempo e escrevi uma solicitação pull (# 900), mas os repositórios estão fora de sincronia agora e meu fork está muito desatualizado. Você pode encontrá-lo aqui se ajudar: https://github.com/adcSTUDIO/chosen

já estou usando https://github.com/harvesthq/chosen como fazer isso :(

@andreialecu seu código funciona bem! obrigado!!!

Obrigado @christhomas, seu código funcionou muito bem: dancer:

Nem @christhomas ou @ghiculescu funcionaram para mim usando uma seleção multi-agrupada. deixando para a validação do servidor por enquanto.

Quando experimentei o patch @ghiculescu , funcionou, exceto que um pergaminho era exibido o tempo todo, abaixo da caixa de seleção.
Quando tentei o patch @christhomas, o pop-up apareceu sem a caixa de pesquisa abrir.

Tive que modificar o script de @ghiculescu para poder chamar escolhido duas vezes:

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

Caso contrário, a 2ª viagem removeu o estilo que foi adicionado na primeira:

$.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
}

Acabei de adicionar esta condição extra ao primeiro se: && select.attr('style') != style

@doganmeh Funciona muito bem no Chrome e em dispositivos móveis (com Chrome), mas testado no Firefox 53.0 onde não funciona

Mesmo este http://jsfiddle.net/hq7b426j/1/ não funciona no Firefox 53.0

Hmmm, mas isso parece mais um problema do Firefox porque se você clicar no botão mais vezes, verá que o Firefox tenta exibir a mensagem (mas isso nunca é processado completamente)

Eu usei essa solução. É muito simples e funciona perfeitamente:

<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 isso não funciona se você tiver escolhido com várias seleções:
http://jsfiddle.net/jeromax/o5a8aogh/

Eu consertei isso.

`
$ .fn.oldChosen = $ .fn.chosen
$ .fn.chosen = função (opções) {
var select = $ (this),
is_creating_chosen = !! options;

if (is_creating_chosen && select.css ('position') === 'absoluto') {
// se estivermos criando um escolhido e o select já tiver os estilos apropriados adicionados
// nós os removemos (para que o select não tenha uma largura absurda), então criamos o escolhido
// então nós os adicionamos novamente mais tarde
select.removeAttr ('estilo');
}

var ret = select.oldChosen (opções)

// age apenas se o select tiver display: none, caso contrário, o escolhido não é compatível (iPhone, etc)
if (is_creating_chosen && select.css ('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
// só faça isso se estiver inicializando escolhido (sem parâmetros ou parâmetros de objeto) e não chamando um 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);

}
retornar ret
}
`

+1

Alguém pode consertar isso? É um problema muito antigo e uma funcionalidade muito importante hoje em dia. Obrigada.

Não funciona na versão mais recente.

Isso parece estar quebrando a validação de formulário do angular.js ao usar o angular escolhido também.

É 2018 e ainda estamos tendo o mesmo problema. É um inferno como os padrões HTML não podem funcionar corretamente e integrados com plug-ins externos. Tempos loucos :)

Isso também está quebrando o plugin escolhido do Drupal. Veja https://www.drupal.org/project/chosen/issues/2705891

Não foi possível encontrar uma solução adequada para isso além de uma solução 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;
}

Se estiver usando Escolhido para todos os elementos select , você pode usar este CSS para torná-lo visível (para DOM), mas sem opacidade, sem altura, posição absoluta.

Esses seletores CSS são direcionados a elementos de seleção inválidos, com um deles direcionado a multiple adicionando 15px margin-top para centralizá-lo nos elementos multisseleção.

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

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

Demonstração: http://jsfiddle.net/tripflex/2zdeu9oc/

MAS REALMENTE ... isso já deve ser tratado pela lib Chosen.JS

Esta é minha solução alternativa, se for útil:

// 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 você pode mostrar dentro do contexto? Tentei sua solução e não funcionou.

@AndrewSouthpaw Este é o meu código, as correções funcionam bem para mim :)

$("#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();

Estou usando um código ligeiramente diferente (com base no código aqui):

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

Ele não controla a ação 'destruir', mas posiciona bem a mensagem de erro e parece funcionar no Firefox e no Chromiun. Como o seletor original não está oculto, a borda de destaque do erro fica visível. Atualização : com max-height também funciona no IE. Outra atualização : adicione tabindex -1 para garantir que não receba o foco. (embora ainda seja focalizável e receba mensagens de erro).

Houve um PR aberto que resolve isso, mas acho que ele se perdeu desde que o outro tópico que visava foi fechado. Veja # 2594

@jhedstrom adoraria ver essa fusão. Você sabe se esta biblioteca ainda é mantida?

Usei algo semelhante à solução de

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

Obrigado @jhedstrom por me apontar na direção certa!