Quais são as diferenças entre Chosen e Select2?

157

Chosen e Select2 são as duas bibliotecas mais populares para estender caixas de seleção.

Ambos parecem ser mantidos ativamente, o Chosen é mais antigo e suporta jQuery e Prototype.

O Select2 é apenas jQuery, sua documentação diz que o Select2 é inspirado no Chosen, mas não detalha nenhuma melhoria feita (se houver) ou outros motivos para a reescrita.

Duas bibliotecas têm praticamente o mesmo conjunto de recursos, a única comparação que encontrei é uma página de teste jsperf um tanto inconclusiva.

Alguma dessas bibliotecas tem vantagens em relação à outra?

Paulo
fonte
11
Sua experiência com solicitações de recebimento é provavelmente uma boa dica sobre por que o Select2 começou como uma reescrita, não como um garfo. Notei também que o Select2 tem uma documentação melhor (ou pelo menos mais longa).
Paul
1
Quando importa ou por uma questão de diferença, o Chosen é o MIT, enquanto o Select2 é licenciado pela Apache.
EGL 2-101
2
Para ser mais preciso, o Select2 está disponível sob licença Apache ou GPL v2. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Paul

Respostas:

92

A partir do Select2 3.3.1, abaixo está o que está documentado em seu README.md

O que o suporte Select2 escolhido não?

  • Trabalhando com grandes conjuntos de dados: o Chosen exige que todo o conjunto de dados seja carregado como optiontags no DOM, o que o limita a trabalhar com conjuntos de dados pequenos. O Select2 usa uma função para encontrar resultados rapidamente, o que permite carregar parcialmente os resultados.
  • Paginação de resultados: como o Select2 trabalha com grandes conjuntos de dados e carrega apenas uma pequena quantidade de resultados correspondentes por vez, é necessário oferecer suporte à paginação. O Select2 chamará a função de pesquisa quando o usuário rolar para a parte inferior do conjunto de resultados atualmente carregado, permitindo a 'rolagem infinita' dos resultados.
  • Marcação personalizada para resultados: a opção Escolhida suporta apenas a renderização de resultados de texto, porque essa é a única marcação suportada pelas optiontags. O Select2 fornece um ponto de extensão que pode ser usado para produzir qualquer tipo de marcação para representar resultados.
  • Capacidade de adicionar resultados rapidamente: Select2 oferece a capacidade de adicionar resultados do termo de pesquisa digitado pelo usuário, o que permite que ele seja usado para marcação.
Mr. 14
fonte
2
fwiw alguém trabalhou no recurso "adicionar resultados em tempo real" para o Chosen: github.com/shezarkhani/chosen/tree/create_new_options Estou usando algum tipo de adaptação no ExpressionEngine add-on MX Select Plus (é assim que Cheguei aqui, pois agora existe um complemento concorrente usando o Select2).
Notacouch
Deve-se notar, no entanto, que o Select2 não tem um fallback quando o Javascript está desativado, pois as opções são preenchidas via AJAX.
deathlock
10
Nada que extraia dados via AJAX funcionará sem Javascript. O Select2 funciona bem com valores pré-preenchidos e não precisa usar o AJAX.
21413 zachzurn
@notacouch O que é "Suporte à matriz" e "Suporte a baixas variáveis" e "Suporte ao SafeCracker"? Esses conceitos são específicos do ExpressionEngine?
John Zabroski
@JohnZabroski Sim, são complementos comerciais do EE 2.x (o iirc SafeCracker pode ter sido incorporado).
Notacouch 24/05
40

O IMHO Escolhido é "mantido", mas não "mantido ativamente". 341 questões e 51 solicitações pull para Chosen. O Select2 tem 128 problemas e 25 solicitações pull. Eu acho que o padrão para estes é basicamente

  • escolha o que for superficialmente mais atraente para você
  • use-o em um aplicativo ou dois
  • enfrente problemas ou limitações de personalização
  • talvez tente trabalhar com a comunidade por meio de problemas e solicitações de recebimento
  • acabe ficando de saco cheio e apenas crie seu próprio usando o que aprendeu nesse processo

Qualquer que você escolher, se o seu caso de uso estiver exatamente no ponto ideal, qualquer um funcionará. Caso contrário, você terá que escrever seus próprios textos ou personalizá-los intensamente. Em ambos os casos, a escolha de qual deles especificamente não é tão importante. Acho que vou apoiar @Andy Ray e @paul aqui que o Select2 é provavelmente a melhor escolha inicial.

Peter Lyons
fonte
4
Na minha opinião, mais questões significam que mais pessoas se importam e usam. E uma comunidade maior tende a produzir um código melhor (isso não se aplica aos escolhidos). AngularJS: 397 questões, 49 solicitações pull; joyent / nó: 476 questões, 98 solicitações de recebimento. Gostaria de saber quais seriam os números para o firefox, kernel do linux ou gcc.
Paul
Sim, é apenas uma heurística. Em teoria, um widget de seleção automática deve ter várias ordens de magnitude com menor complexidade do que algo como joyent / node. Essas coisas acabam sendo altamente personalizadas, então tenho a sensação de que as pessoas estão preenchendo solicitações pull, que são ignoradas, e então elas mantêm uma bifurcação separada ou reescrevem. YMMV.
Peter Lyons
Apenas uma observação se seus planos são para uma abordagem de personalização: o Chosen possui uma quantidade significativamente menor de código (cerca de 1/3), mas está escrito em CoffeeScript e SASS (antes de ser compilado em JS / CSS). Se você já conhece o CoffeeScript, sua escolha é simples: o Chosen será mais fácil de entender e personalizar.
quer
@ Peter Lyons Estas são algumas métricas bastante bizarras usadas para tirar sua conclusão (não que eu não concorde com sua conclusão). Dê uma olhada no número de colaboradores (Select2 = 239 v. Escolhido = 73), mas isso também pode ser enganoso, mais nem sempre é melhor. O Pulso e os Gráficos de cada projeto do GitHub exibem histórico e frequência de confirmação, juntamente com várias outras estatísticas úteis para tomar uma decisão informada sobre qual projeto pode "manter" versus "em desenvolvimento ativo".
cfx 18/05
FWIW, o Chosen teve muitas atualizações nos últimos dois anos.
Charles Wood
21

Outra diferença que vale a pena mencionar é que Chosené desenvolvida em Sasse CoffeeScriptenquanto Select2é simples CSSe JS. É a minha opção pessoal que Sasse CoffeeScriptsão camadas desnecessárias de complexidade que fazem a depuração difícil.

Depois de experimentar os dois, decidi não usar nenhum - tentar Select2criar a funcionalidade do item acaba por ser um assunto muito cabeludo, já que você simplesmente não pode fazê-lo quando conectado a <select>elementos - ele simplesmente não parecia bem pensado sobre os aros que eu teria para pular.

Decidi usar o selectize.js, que apenas adiciona o novo <option>...</option>elemento ao DOM do formulário - e isso é sensato. Ele também usa LESS- mas eu ignoraria isso e apenas adaptaria o compilado CSSdiretamente no seu projeto.

Daniel Sokolowski
fonte
2
selectize.jsusa menos . Isso é menos um beco sem saída tecnológico do que Sassé?
22713 Chris Wesseling
Não, ele está no mesmo domínio, mas dos três selectize.js precisavam de menos ajustes para se adequar ao projeto.
precisa saber é o seguinte
selectize tem problemas visuais no Firefox 28.
MEM
@MEM você poderia ser mais específico.
Daniel Sokolowski
No Firefox 28 (Mac OS X), você notará uma "margem ou preenchimento ou borda" cinza extra abaixo de cada campo de entrada. Não é um efeito, suponho. Deve ser uma inconsistência visual. Fica claro quando olhamos para eles no FF, e a mesma falha não ocorre no Chrome, por exemplo.
MEM
18

selected.js vs select2.js

  • Licença MIT para ambos
  • Dependências:
    • Select2: jQuery
    • Escolhido: tbc
  • Suporte para navegador de área de trabalho:
    • Selecionar2: IE8 +
    • Escolhido: IE8 +
  • Suporte do dispositivo:
    • Select2: claro
    • Escolhido: desativado em dispositivos móveis iPhone, iPod Touch e Android
  • Peso (minificado):
    • Selecionar2: 57KB
    • Escolhido: 27KB
  • Uso: O Select2 suporta uma interface de usuário mais "sofisticada" (consulte 'modelos')
  • Ambos os repositórios de código estão disponíveis no Github
    • Select2: contribuições: muito ativo
    • Escolhido: contribuições: cerca de 3x menos que o Select2

Contribuições de select2.js Contribuições selected.js

ps. Tentarei atualizar esta resposta quando descobrir mais sobre os pontos ausentes

Adrien Be
fonte
O Select2 deve suportar dispositivos móveis da mesma maneira que outros. Tentamos garantir que funcione da mesma forma, com todas as funcionalidades pretendidas, em todos os dispositivos.
Kevin Brown
1
Acho que a principal razão pela qual o select2 é mais ativo é que eles estão trabalhando no select2 4.x, que é uma das principais reescritas. Sinceramente, não entendo por que as pessoas colocam tanta ênfase nas contribuições. Eu gostaria que o GitHub tivesse um fluxograma cumulativo que rastreiasse coisas importantes como cobertura de código e casos de teste, bem como tempo médio de resposta para problemas! (Eu uso select2, btw, o meu ponto é apenas uma implicância geral pet sobre as pessoas com foco em contribuições e a engenharia social que é incentivada por gráficos acima.)
John Zabroski
13

Primeiro, deixe-me dizer que o Chosen e o Select2 são dois ótimos plugins e essa é minha experiência pessoal sobre o Chosen. Tudo o que eles estão dizendo é verdade em relação aos Escolhidos.

O problema apontado por Pēteris Caune com select2 anos e ainda não existe uma correção oficial. Simplesmente não existe uma boa documentação para a API. Já foi apontado (assista a edição 671) muitas vezes, mas ainda não há nada. Levou quase dois anos para resolver esse problema, onde o escolhido basicamente não funcionaria se você ocultasse a div overflow:hiddenantes de mostrá-la (e você deve usar uma witdh:X%opção que você basicamente nunca saberia se não procurar o problema).

Eu diria que o principal problema é a velocidade da correção, como disse o DelvarWorld na edição 92:

Minha solicitação de recebimento corrige esse problema, mas, como meu outro e muitos dos escolhidos, eles estão sendo ignorados. Este projeto tem muitos colaboradores com uma base de código muito pequena.

Escolhi o Chosen pela primeira vez pela licença MIT, mas eu tinha todos esses problemas (corte suspenso, sem encontrar a API, procurando horas para o estouro oculto), então decidi mudar para o select2 porque ele possui uma documentação melhor, sem erros de corte suspenso e correções mais rápidas.

zipp
fonte
Apenas para observar que o Select2 também é licenciado no MIT. github.com/select2/select2/blob/master/LICENSE.md
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Esta resposta é realmente antiga e pode não se aplicar mais. Vou editá-lo quando tiver tempo.
Zipp
9

Um recurso que funciona no Select2, mas não funciona no Chosen, é o selectelemento interno que possui overflow: hiddenou overflow: auto.

insira a descrição da imagem aqui

Problema correspondente ao Chosen: https://github.com/harvesthq/chosen/issues/86

Pēteris Caune
fonte
Estou enfrentando o mesmo problema com a Chosen.
devXen
1
Você pode fazer isso .chosen-drop { z-index: 999999 !important;}para corrigir isso com os escolhidos
Alireza Fattahi
6

Encontrei algumas diferenças ao trabalhar com esses dois plugins:

  • Com o select2, você pode pesquisar em qualquer local da opção. Por exemplo, se você tiver uma opção chamada ABCDEFG e digitar CDE, você obterá essa opção nos resultados da pesquisa, mas com a opção escolhida precisará digitar AB .. e assim por diante para obter os resultados.

  • Descobri que, com conjuntos de dados maiores, o escolhido parece ser mais rápido que o select2, especialmente no IE.

reggaemahn
fonte
2
Sim Escolhido parece procurar palavras, que digitará Kingdomna página de exemplo retornará, o United Kingdomque parece uma maneira muito lógica de fazê-lo e você também pode especificar $("#element").chosen({ search_contains: true });.
Daniel Sokolowski
2
Eu concordo com você e, muitas vezes, é o caso, ie. você procuraria palavras. Mas em muitos casos em que você tem coisas entre colchetes, como 'xyz (abc)', se você digitar 'abc', também está procurando por 'xyz', que não será retornado. Eu acho que tudo se resume ao cenário em que você o está usando. No meu aplicativo da web, usei os dois onde eram relevantes. Gosto de escolher um pouco mais apenas por causa da velocidade de renderização superior no IE.
Reggaemahn
5

O Select2 suporta dispositivos móveis, enquanto o Chosen se desativa especificamente em iPods, iPhones e Android móvel. Se você deseja usar caixas de seleção "estendidas" no celular, isso facilita sua escolha.

danvk
fonte
@RezaRahmati thx for that. Você tentou um iPhone também por acaso? harvesthq.github.io/chosen/#faqs diz "Escolhido está desativado em dispositivos móveis iPhone, iPod Touch e Android". mais em github.com/harvesthq/chosen/pull/1388
Adrien Seja
@adrienbe sim eu testei no Galaxy Tab Samsung e iPad
Reza
@RezaRahmati qual foi o resultado?
Adrien Seja
@AdrienBe Funciona, eu usei-o em medicfa.com/Users/Create?reloadList=false abra-o com o tablet e verifique o resultado
Reza
5

Minha experiência com o Select2 foi ótima em computadores, mas em dispositivos móveis sensíveis ao toque muito variados, com algumas peculiaridades sempre presentes. Por exemplo, no xperia st15i com ics e o menu suspenso do navegador de ações sempre se fechava devido ao foco no roubo de teclado. A única maneira de abri-lo novamente é tocar o menu dezenas de vezes, segurar o dedo por um segundo e outra magia vodu. Ou para começar a digitar enquanto a lista suspensa está fechada, e quantos usuários descobrirão isso?

O Selectize.js parece ser muito mais suave que o Select2, mas também possui problemas por conta própria no celular, por exemplo, quando o valor é selecionado ou inserido, move a página totalmente para a esquerda por algum motivo. Além disso, em dispositivos Android 2.x mais antigos que não suportam estouro, é impossível selecionar além das poucas opções principais, pois o teclado não aparece. :(

Ainda temos que testar o Chosen e talvez não seja uma má idéia ser desativado para dispositivos móveis, afinal, mas no final, o bom e velho menu suspenso funciona sempre e em qualquer lugar.

Atualização: agora também testei o Chosen, e é melhor em uma área: não funciona no celular por padrão (ótimo!), Mas possui problemas de filtragem de palavras. Por exemplo, não pesquisa no meio das palavras e, se você usar o & nbsp hack para ajustes, ele também ignorará as opções completas. De volta à prancheta.

dev101
fonte
Para ativar corretamente a pesquisa no Chosen, adicione search_contains: trueàs suas opções. Veja harvesthq.github.io/chosen/options.html
Sicco
1

Por que eu escolhi select2 sobre Chosen

O principal recurso que select2 possui, que nenhum outro controle possui auto-magicamente, é "Limpar tudo", com o 'x' à direita do controle. Este é um recurso matador para o meu aplicativo. Não sei por que outras bibliotecas de aprimoramento de tags de seleção não possuem esse recurso.

John Zabroski
fonte
0

O Select2 suporta AJAX Escolhido Não

O Select 2 é um pouco mais pesado em comparação ao tamanho escolhido.

Mudei para o Select2 porque não há suporte oficial para operações do ajax.

Yash
fonte