Каковы различия между Chosen и Select2?

157

Chosen и Select2 - еще две популярные библиотеки для расширения полей выбора.

Оба, похоже, активно поддерживаются, Chosen старше и поддерживает как jQuery, так и Prototype.

Select2 - это только jQuery, его документация гласит, что Select2 вдохновлен Chosen, но не детализирует какие-либо улучшения (если таковые имеются) или другие причины переписывания.

Две библиотеки имеют практически одинаковый набор функций, единственное сравнение, которое я нашел, это несколько неубедительная тестовая страница jsperf.

Есть ли у этих библиотек какие-либо преимущества перед другими?

javascript jquery-chosen jquery-select2 Павел
источник
11
Ваш опыт работы с запросами на получение ответа, вероятно, является хорошим намеком на то, почему Select2 начал переписывать, а не разветвляться. Я также заметил, что у Select2 есть лучшая (или, по крайней мере, более длинная) документация.
Пол
1
Когда это имеет значение или ради разницы, Chosen - это MIT, а Select2 - по лицензии Apache.
EGL 2-101
2
Чтобы быть точным, Select2 доступен под лицензией Apache или GPL v2. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Paul

Ответы:

92

Начиная с версии Select2 3.3.1, то, что задокументировано в его файле README.md, приведено ниже.

Что поддерживает Select2, а что нет?

  • Работа с большими наборами данных. Для Chosen требуется, чтобы весь набор данных загружался как optionтеги в DOM, что ограничивает его работой с наборами данных небольшого размера. Select2 использует функцию для быстрого поиска результатов, которая позволяет частично загружать результаты.
  • Разбиение на страницы результатов: поскольку Select2 работает с большими наборами данных и загружает только небольшое количество совпадающих результатов за раз, он должен поддерживать подкачку страниц. Select2 вызовет функцию поиска, когда пользователь прокручивает до конца загруженного в данный момент набора результатов, что позволяет выполнять «бесконечную прокрутку» результатов.
  • Пользовательская разметка для результатов: Chosen поддерживает только отображение текстовых результатов, потому что это единственная разметка, поддерживаемая optionтегами. Select2 предоставляет точку расширения, которую можно использовать для создания разметки любого типа для представления результатов.
  • Возможность добавлять результаты на лету: Select2 предоставляет возможность добавлять результаты из поискового запроса, введенного пользователем, что позволяет использовать его для тегирования.
Г-н 14
источник
2
Кто-то работал над функцией «добавить результаты на лету» для Chosen: github.com/shezarkhani/chosen/tree/create_new_options Я использую какую-то его адаптацию в надстройке ExpressionEngine MX Select Plus (вот как Я попал сюда, так как теперь есть конкурирующее дополнение, использующее Select2).
notacouch
Однако следует отметить, что у Select2 нет запасного варианта, когда Javascript отключен, поскольку параметры заполняются через AJAX.
Deathlock
10
Все, что извлекает данные через AJAX, не будет работать без Javascript. Select2 прекрасно работает с предварительно заполненными значениями и не должен использовать AJAX.
zachzurn
@notacouch Что такое «Поддержка матриц» и «Поддержка низких переменных» и «Поддержка SafeCracker»? Эти понятия специфичны для ExpressionEngine?
Джон Заброски
@JohnZabroski Да, это коммерческие дополнения EE 2.x (возможно, был встроен iirc SafeCracker).
notacouch
40

ИМХО Выбранный «поддерживается», но не «активно поддерживается». 341 выпусков и 51 запрос на выбор для Chosen. У Select2 есть 128 проблем и 25 запросов на получение. Я думаю, что образец для них в основном

  • выбрать тот, который внешне более привлекательным для вас
  • использовать его в приложении или два
  • столкнуться с проблемами настройки или ограничениями
  • может быть, попытаться работать с сообществом с помощью вопросов и запросов
  • в конце концов надоело и просто построить свой собственный, используя то, что вы узнали в этом процессе

Независимо от того, что вы выберете, если ваш вариант использования точно в их сладком месте, любой из них будет работать. Если нет, вам в конечном итоге придется написать свои собственные или сильно настроить их. В любом случае, выбор которого не так важен. Полагаю, что на стороне @Andy Ray и @paul, что Select2, вероятно, лучший начальный выбор.

Питер Лайонс
источник
4
На мой взгляд, больше вопросов означает больше людей, которые заботятся и используют. И большее сообщество имеет тенденцию производить лучший код (это не обязательно относится к выбранным). AngularJS: 397 номеров, 49 запросов; Джойент / узел: 476 выпусков, 98 запросов на выдергивание. Интересно, какие цифры будут для firefox, linux kernel или gcc.
Пол
Да, это просто эвристика. Теоретически, виджет автоотбора должен быть на несколько порядков меньшей сложности, чем что-то вроде joyent / node. Эти вещи оказываются весьма нестандартными, поэтому у меня возникает ощущение, что люди подают запросы на извлечение, которые игнорируются, и затем они продолжают поддерживать отдельный форк или переписывать. YMMV.
Питер Лайонс
Просто обратите внимание, если вы планируете использовать подход к настройке: у Chosen значительно меньше кода (около 1/3), но он написан на CoffeeScript и SASS (до компиляции в JS / CSS). Если вы уже знакомы с CoffeeScript, тогда ваш выбор прост: выбор будет легче понять и настроить.
Тим Дорр
@Peter Lyons Вот некоторые довольно странные метрики, используемые для того, чтобы сделать ваш вывод (не то, чтобы я не соглашался с вашим выводом). Посмотрите на количество участников (Select2 = 239 против Chosen = 73), но это также может вводить в заблуждение, больше не всегда лучше. Пульс и графики каждого проекта GitHub отображают историю и частоту коммитов, а также массу других полезных статистических данных для принятия обоснованного решения о том, какой проект может «поддерживаться» по сравнению с «активным развитием».
cfx
FWIW, у Chosen было много обновлений за последние пару лет.
Чарльз Вуд
21

Еще одно различие, о котором стоит упомянуть, заключается в том, что Chosenоно разработано в Sassи CoffeeScriptтогда как Select2является простым CSSи JS. Это мой личный выбор, Sassи CoffeeScriptэто ненужные уровни сложности, которые затрудняют отладку.

Попробовав и то и другое, я решил не использовать ни того, ни другого - попытка получить Select2функциональность создания элемента оказывается очень сложным делом, поскольку вы просто не можете сделать это, когда привязаны к <select>элементам - просто не очень хорошо продуманы обручи, которые у меня были бы перепрыгнуть.

Я остановился на использовании selectize.js, который просто добавляет новый <option>...</option>элемент в DOM формы - и это нормально. Он также использует LESS- но я бы обошел это и просто приспособил скомпилированный CSSпрямо в вашем проекте.

Даниэль Соколовский
источник
2
selectize.jsиспользует меньше . Это меньше технологического тупика, чем Sassесть?
Крис Весселинг
Нет, он находится в том же домене, но из трех selectize.js требовалось наименьшая настройка, чтобы соответствовать проекту.
Даниэль Соколовский
у selectize визуальные проблемы в Firefox 28.
MEM
@MEM не могли бы вы быть более конкретным.
Даниэль Соколовский
В Firefox 28 (Mac OS X) вы заметите дополнительный серый «поле, отступы или границы» под каждым полем ввода. Это не эффект, я полагаю. Это должно быть визуальное несоответствие. Понятно, когда мы посмотрим на них в FF, и такого же сбоя не возникает, например, в Chrome.
MEM
18

selected.js против select2.js

  • Лицензия MIT для обоих
  • зависимости:
    • Выберите 2: JQuery
    • Выбрано: tbc
  • Поддержка настольного браузера:
    • Выберите 2: IE8 +
    • Выбрано: IE8 +
  • Поддержка устройства:
    • Select2: неясно
    • Выбрано: отключено на мобильных устройствах iPhone, iPod Touch и Android
  • Вес (минимизированный):
    • Выберите 2: 57 КБ
    • Выбрано: 27KB
  • Использование: Select2 поддерживает более «причудливый» интерфейс (см. «Шаблоны»).
  • Оба репозитория доступны на Github
    • Select2: вклады: очень активные
    • Выбрано: взносы: примерно в 3 раза меньше, чем Select2

Вклад select2.js выбранные вклады

пс. Я постараюсь обновить этот ответ, когда узнаю больше о пропущенных точках

Адриен Бе
источник
Select2 должен поддерживать мобильные устройства так же, как и другие. Мы стараемся убедиться, что он работает одинаково со всеми намеченными функциями на всех устройствах.
Кевин Браун
1
Я думаю, что основная причина, по которой select2 более активен, заключается в том, что они работают над select2 4.x, что является серьезной переписью. Я, честно говоря, не понимаю, почему люди уделяют столько внимания вкладу. Я бы хотел, чтобы у GitHub была кумулятивная блок-схема, которая отслеживала такие важные вещи, как покрытие кода и контрольные примеры, а также среднее время отклика на проблемы! (Я использую select2, между прочим, моя точка зрения - это общее мнение о людях, которые сосредоточены на вкладах и социальной инженерии, что поощряется приведенными выше графиками.)
Джон Заброски
13

Во-первых, позвольте мне сказать вам, что Chosen и Select2 - это два замечательных плагина, и это мой личный опыт работы с Chosen. Все, что они говорят, верно в отношении Избранных.

Вопрос указал Петерис Цауне с select2 -х лет и до сих пор нет никакого официального исправления. Просто нет хорошей документации по API. Это было указано (смотреть выпуск 671) много раз, но все еще ничего нет. Им потребовалось почти 2 года, чтобы решить эту проблему, где выбранное не сработало бы, если бы вы спрятали div, overflow:hiddenпрежде чем показывать его (и вы должны использовать witdh:X%опцию, о которой вы в принципе никогда не узнаете, если не будете искать проблему).

Я бы сказал, что основная проблема - это скорость исправления, как сказал DelvarWorld в выпуске 92:

Мой запрос на удаление исправляет эту проблему, но, как и другие, и многие из выбранных, они игнорируются. В этом проекте слишком много участников со слишком маленькой базой кода.

Сначала я выбрал Chosen для его лицензии MIT, но у меня были все эти проблемы (выпадающий список, не находил API, часами скрывался переполнение), поэтому я решил переключиться на select2, потому что он имеет лучшую документацию, нет ошибки сокращения выпадающего списка и быстрее исправляет.

Zipp
источник
Просто чтобы отметить, что Select2 также лицензируется в рамках MIT. github.com/select2/select2/blob/master/LICENSE.md
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Этот ответ действительно старый и может больше не применяться. Я отредактирую это, когда у меня будет время.
zipp
9

Одна функция, которая работает в Select2, но не работает в Chosen, - это selectэлемент внутри, который имеет overflow: hiddenили overflow: auto.

введите описание изображения здесь

Соответствующий вопрос для Избранных: https://github.com/harvesthq/chosen/issues/86

Петерис Кауне
источник
Я сталкиваюсь с той же проблемой с Chosen.
devXen
1
Вы можете сделать .chosen-drop { z-index: 999999 !important;}это,
выбрав
6

Некоторые различия, которые я обнаружил, работая с этими двумя плагинами:

  • С select2 вы можете искать в любом месте в опции. Например, если у вас есть опция с именем ABCDEFG и вы вводите CDE, вы получите эту опцию в результатах поиска, но, выбрав ее, вы должны набрать AB ... и так далее, чтобы получить результаты.

  • Я обнаружил, что с большими наборами данных selected кажется быстрее, чем select2, особенно в IE.

reggaemahn
источник
2
Да, Chosen, кажется, выполняет поиск по словам, то есть ввод Kingdomна странице их примера вернет вас, United Kingdomчто представляется очень логичным способом сделать это, плюс вы также можете указать $("#element").chosen({ search_contains: true });.
Даниэль Соколовский
2
Я согласен с вами, и часто это так. вы будете искать слова. Но во многих случаях, когда в скобках есть такие вещи, как «xyz (abc)», если вы наберете «abc», вы также ищете «xyz», который не будет возвращен. Я думаю, это сводится к сценарию, в котором вы его используете. В моем веб-приложении я использовал оба из них, где они были актуальны. Я предпочел выбрать немного больше только из-за его превосходной скорости рендеринга в IE.
Reggaemahn
5

Select2 поддерживает мобильные устройства, тогда как Chosen специально отключает себя на iPod, iPhone и мобильных устройствах Android. Если вы хотите использовать «расширенные» поля выбора на мобильном устройстве, это облегчит ваш выбор.

danvk
источник
@ RezaRahmati спасибо за это. Вы тоже случайно примерили iPhone? unchhq.github.io/chosen/#faqs говорит, что «Выбран отключен на мобильных устройствах iPhone, iPod Touch и Android». больше на github.com/harvesthq/chosen/pull/1388
Адриен Бе
@adrienbe да, я проверил его на вкладке Samsung Galaxy и iPad
Реза
@RezaRahmati, каков был результат?
Адриен Бе
@AdrienBe Это работает, я использовал его на medicfa.com/Users/Create?reloadList=false, откройте его с помощью планшета и проверьте результат
Реза
5

Мой опыт работы с Select2 был великолепен на настольных компьютерах, но на мобильных устройствах с сенсорным экраном они сильно различались, при этом всегда присутствовали некоторые причуды. Например, на xperia st15i с ics и штатным браузером выпадающий список всегда закрывался из-за кражи клавиатуры. Единственный способ открыть его снова - это коснуться меню десятки раз, удерживать палец на секунду и прочую магию вуду. Или начать печатать, когда выпадающий список закрыт, и сколько пользователей это поймут?

Selectize.js кажется намного более плавным, чем Select2, но он также имеет проблемы самостоятельно на мобильном телефоне, например, когда значение выбрано или введено, оно по какой-то причине перемещает страницу полностью влево. Кроме того, на старых устройствах Android 2.x, которые не поддерживают переполнение, невозможно выбрать несколько верхних опций, поскольку клавиатура не появляется. :(

Тем не менее, придется тестировать Chosen, и, возможно, неплохо было бы отключить мобильные устройства, но в конце концов старый добрый выпадающий список работает всегда и везде.

Обновление: теперь я также проверил Chosen, и он лучше в одной области: по умолчанию он не работает на мобильных устройствах (отлично!), Но имеет проблемы с фильтрацией слов. Например, не ищет в середине слова, и если вы используете & NBSP хак для aligments, она также будет игнорировать полный набор опций. Вернуться к чертежной доске.

dev101
источник
Для правильного включения поиска в Избранном добавьте search_contains: trueв свои настройки. См .unchhq.github.io/chosen/options.html
Sicco
1

Почему я выбрал select2 вместо Chosen

Ключевая особенность select2, которую ни у какого другого элемента управления не существует автоматически, это «Очистить все» выборки с символом «x» в правой части элемента управления. Это убийственная функция для моего приложения. Я не знаю, почему в других библиотеках выбора тегов отсутствует эта функция.

Джон Заброски
источник
0

Select2 поддерживает AJAX Chosen Не поддерживает

Выбор 2 немного тяжелее по сравнению с выбранным.

Я переключился на Select2, потому что нет официальной поддержки операций ajax.

Яши
источник