Apa perbedaan antara Terpilih dan Select2?

157

Dipilih dan Select2 adalah dua perpustakaan lebih populer untuk memperluas kotak pilih.

Keduanya tampaknya dipelihara secara aktif, Dipilih lebih tua dan mendukung jQuery dan Prototipe.

Select2 hanya jQuery, dokumentasinya mengatakan Select2 terinspirasi oleh Chosen, tetapi tidak merinci perbaikan yang dibuat (jika ada) atau alasan lain untuk penulisan ulang.

Dua perpustakaan memiliki set fitur yang hampir sama, satu-satunya perbandingan yang saya temukan adalah halaman uji jsperf yang agak tidak meyakinkan.

Apakah ada perpustakaan yang memiliki kelebihan dibandingkan yang lain?

javascript jquery-chosen jquery-select2 Paul
sumber
11
Pengalaman Anda dengan permintaan tarik mungkin merupakan petunjuk yang bagus tentang mengapa Select2 dimulai sebagai penulisan ulang, bukan fork. Saya juga memperhatikan bahwa Select2 memiliki dokumentasi yang lebih baik (atau setidaknya lebih lama).
Paul
1
Ketika itu penting atau demi perbedaan Dipilih adalah MIT sementara Select2 adalah lisensi Apache.
EGL 2-101
2
Lebih tepatnya, Select2 tersedia di bawah lisensi Apache atau GPL v2. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Paul

Jawaban:

92

Pada Select2 3.3.1, di bawah ini adalah apa yang didokumentasikan dalam README.md-nya

Apa Dukungan Select2 Yang Tidak Dipilih?

  • Bekerja dengan dataset besar: Dipilih mengharuskan seluruh dataset dimuat sebagai option tag di DOM, yang membatasi untuk bekerja dengan dataset kecil. Select2 menggunakan fungsi untuk menemukan hasil saat itu juga, yang memungkinkannya memuat sebagian hasil.
  • Paging hasil: Karena Select2 bekerja dengan dataset besar dan hanya memuat sejumlah kecil hasil yang cocok pada suatu waktu ia harus mendukung paging. Select2 akan memanggil fungsi pencarian ketika pengguna menggulir ke bagian bawah hasil set yang dimuat saat ini memungkinkan untuk 'bergulir tak terbatas' dari hasil.
  • Markup kustom untuk hasil: Dipilih hanya mendukung hasil teks rendering karena itu adalah markup hanya didukung oleh option tag. Select2 menyediakan titik ekstensi yang dapat digunakan untuk menghasilkan segala jenis markup untuk mewakili hasil.
  • Kemampuan untuk menambahkan hasil dengan cepat: Select2 menyediakan kemampuan untuk menambahkan hasil dari istilah pencarian yang dimasukkan oleh pengguna, yang memungkinkannya digunakan untuk penandaan.
Tn. 14
sumber
2
fwiw seseorang berhasil menggunakan fitur "tambahkan hasil dengan cepat" untuk Dipilih: github.com/shezarkhani/chosen/tree/create_new_options Saya menggunakan beberapa jenis adaptasi di add-on ExpressionEngine MX Select Plus (itu adalah caranya Saya sampai di sini karena sekarang ada add-on yang bersaing menggunakan Select2).
notacouch
Perlu dicatat bahwa Select2 tidak memiliki cadangan ketika Javascript dinonaktifkan, karena opsi diisi melalui AJAX.
deathlock
10
Tidak ada yang menarik data melalui AJAX yang akan berfungsi tanpa Javascript. Select2 berfungsi baik dengan nilai yang sudah diisi sebelumnya dan tidak harus menggunakan AJAX.
zachzurn
@notacouch Apa itu "Dukungan Matriks" dan "Dukungan Variabel Rendah" dan "dukungan SafeCracker"? Apakah konsep ini khusus untuk ExpressionEngine?
John Zabroski
@JohnZabroski Ya, itu adalah iklan komersial EE 2.x (iirc SafeCracker mungkin sudah ada di dalamnya).
notacouch
40

IMHO Terpilih "dipelihara" tetapi tidak "dipelihara secara aktif". 341 masalah dan 51 menarik permintaan untuk Dipilih. Select2 memiliki 128 masalah dan 25 permintaan tarik. Saya pikir pola untuk ini pada dasarnya

  • pilih yang mana yang lebih menarik bagi Anda
  • menggunakannya dalam satu atau dua aplikasi
  • bertemu dengan masalah atau batasan kustomisasi
  • mungkin mencoba bekerja dengan komunitas melalui masalah & menarik permintaan
  • akhirnya merasa muak dan hanya membangun sendiri menggunakan apa yang Anda pelajari dalam proses ini

Apa pun yang Anda pilih, jika kasing Anda tepat berada di sweet spot mereka, salah satunya akan berfungsi. Jika tidak, pada akhirnya Anda harus menulis sendiri atau menyesuaikannya. Dalam kedua kasus itu, pilihan mana yang secara khusus tidak begitu penting. Saya kira saya akan memihak @Andy Ray dan @paul di sini bahwa Select2 mungkin merupakan pilihan awal yang lebih baik.

Peter Lyons
sumber
4
Dalam pandangan saya lebih banyak masalah berarti lebih banyak orang peduli dan menggunakan. Dan komunitas yang lebih besar cenderung menghasilkan kode yang lebih baik (ini tidak perlu berlaku untuk yang dipilih). AngularJS: 397 masalah, 49 persyaratan menarik; joyent / node: 476 masalah, 98 reqs tarik. Saya ingin tahu berapa angka untuk firefox, linux kernel atau gcc.
Paul
Ya itu hanya heuristik. Secara teori, widget pilihan otomatis harus beberapa urutan dengan kompleksitas yang lebih rendah daripada sesuatu seperti joyent / node. Hal-hal ini ternyata sangat sesuai kebiasaan, jadi saya merasa bahwa orang-orang mengajukan permintaan tarik, yang diabaikan, dan kemudian mereka mempertahankan garpu atau penulisan ulang yang terpisah. YMMV.
Peter Lyons
Hanya catatan jika rencana Anda akan pergi dengan pendekatan penyesuaian: Dipilih memiliki jumlah kode yang jauh lebih kecil (sekitar 1/3), tetapi ditulis dalam CoffeeScript dan SASS (sebelum dikompilasi ke JS / CSS). Jika Anda sudah terbiasa dengan CoffeeScript, maka pilihan Anda sederhana: Dipilih akan lebih mudah dipahami dan disesuaikan.
Tim Dorr
@Peter Lyons Ini adalah beberapa metrik yang cukup aneh yang digunakan untuk menarik kesimpulan Anda (bukannya saya tidak setuju dengan kesimpulan Anda). Lihatlah jumlah kontributor (Select2 = 239 v. Dipilih = 73) tetapi itu mungkin juga menyesatkan, lebih banyak tidak selalu lebih baik. Pulsa dan Grafik dari setiap proyek GitHub menampilkan riwayat dan frekuensi komit bersama dengan satu ton statistik berguna lainnya untuk membuat keputusan berdasarkan informasi tentang proyek mana yang mungkin "dipertahankan" vs "menjalani pengembangan aktif."
cfx
FWIW, Dipilih telah memiliki banyak pembaruan dalam beberapa tahun terakhir.
Charles Wood
21

Perbedaan lain yang layak disebutkan adalah yang Chosendikembangkan di Sassdan CoffeeScriptsedangkan Select2jelas CSSdan JS. Ini adalah pilihan pribadi saya Sassdan CoffeeScriptmerupakan lapisan kompleksitas yang tidak diperlukan yang membuat debug sulit.

Setelah mencoba keduanya, saya memutuskan untuk tidak menggunakan keduanya - mencoba Select2membuat fungsionalitas item ternyata menjadi urusan yang sangat berbulu karena Anda tidak dapat melakukannya ketika dilampirkan ke <select>elemen - hanya saja tidak merasa dipikirkan dengan baik lingkaran yang akan saya miliki untuk melompat.

Saya telah memutuskan untuk menggunakan selectize.js yang hanya menambahkan <option>...</option>elemen baru ke DOM form - dan itu waras. Itu juga menggunakan LESS- tapi saya akan memotong itu dan hanya menyesuaikan yang dikompilasi CSSlangsung di proyek Anda.

Daniel Sokolowski
sumber
2
selectize.jsmenggunakan lebih sedikit . Apakah itu kurang dari jalan buntu teknologi daripada Sass?
Chris Wesseling
Tidak, itu dalam domain yang sama tetapi dari tiga selectize.js membutuhkan tweaker paling tidak agar sesuai dengan proyek.
Daniel Sokolowski
selectize memiliki masalah visual pada Firefox 28.
MEM
@MEM Anda bisa lebih spesifik.
Daniel Sokolowski
Di Firefox 28 (Mac OS X), Anda akan melihat "margin atau padding atau border" abu-abu ekstra di bawah setiap bidang input. Kurasa itu bukan efek. Itu harus menjadi inkonsistensi visual. Sudah jelas setelah kita melihatnya di FF, dan kesalahan yang sama tidak terjadi pada Chrome misalnya.
MEM
18

selected.js vs select2.js

  • Lisensi MIT untuk keduanya
  • Ketergantungan:
    • Select2: jQuery
    • Pilihan: tbc
  • Dukungan browser desktop:
    • Select2: IE8 +
    • Pilihan: IE8 +
  • Dukungan perangkat:
    • Select2: tidak jelas
    • Dipilih: dinonaktifkan di iPhone, iPod Touch, & perangkat seluler Android
  • Berat (diperkecil):
    • Pilih2: 57KB
    • Terpilih: 27KB
  • Penggunaan: Select2 mendukung lebih banyak UI "mewah" (lihat 'templat')
  • Kedua repo kode tersedia di Github
    • Select2: kontribusi: sangat aktif
    • Dipilih: kontribusi: sekitar 3x kurang dari Select2

kontribusi select2.js kontribusi yang dipilih

ps. Saya akan mencoba memperbarui jawaban ini ketika saya tahu lebih banyak tentang poin yang hilang

Adrien Be
sumber
Select2 harus mendukung perangkat seluler dengan cara yang sama seperti yang lain. Kami mencoba memastikan semuanya berfungsi dengan baik, dengan semua fungsi yang dimaksudkan, di semua perangkat.
Kevin Brown
1
Saya pikir alasan utama select2 lebih aktif adalah karena mereka bekerja pada select2 4.x, yang merupakan penulisan ulang utama. Sejujurnya saya tidak mengerti mengapa orang terlalu menekankan kontribusi. Saya berharap GitHub memiliki diagram alur kumulatif yang melacak hal-hal penting seperti cakupan kode dan kasus pengujian, serta waktu respons rata-rata untuk masalah! (Saya menggunakan select2, btw, maksud saya hanyalah kesal hewan peliharaan umum tentang orang-orang yang berfokus pada kontribusi dan rekayasa sosial yang didorong oleh grafik di atas.)
John Zabroski
13

Pertama, saya beri tahu Anda bahwa Chosen dan Select2 adalah dua plugin yang bagus dan ini adalah pengalaman pribadi saya tentang Chosen. Semua yang mereka katakan benar tentang Terpilih.

The masalah ditunjukkan oleh Pēteris Caune dengan selectberusia 2 tahun dan masih tidak ada perbaikan resmi. Tidak ada dokumentasi yang baik untuk API. Telah ditunjukkan (masalah menonton 671) banyak waktu tetapi masih tidak ada. Mereka membutuhkan hampir 2 tahun untuk menyelesaikan masalah ini di mana yang dipilih pada dasarnya tidak akan berfungsi jika Anda menyembunyikan div overflow:hiddensebelum menunjukkannya (dan Anda harus menggunakanwitdh:X% opsi yang pada dasarnya tidak akan pernah Anda ketahui jika Anda tidak mencari masalah).

Saya akan mengatakan bahwa masalah utama adalah kecepatan perbaikan seperti yang dikatakan DelvarWorld dalam edisi 92:

Permintaan penarikan saya memperbaiki masalah ini, tetapi seperti yang lainnya dan banyak yang untuk dipilih, mereka diabaikan. Proyek ini memiliki terlalu banyak kontributor dengan basis kode terlalu kecil.

Saya pertama kali memilih Dipilih untuk lisensi MIT-nya tetapi saya memiliki semua masalah tesis ini (dropdown cut, tidak menemukan API, mencari jam untuk overflow yang disembunyikan), jadi saya memutuskan untuk beralih ke select2 karena memiliki dokumentasi yang lebih baik, tidak ada bug dropdown cut dan perbaikan lebih cepat.

zip
sumber
Sekadar diketahui, Select2 juga dilisensikan di bawah MIT. github.com/select2/select2/blob/master/LICENSE.md
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Jawaban ini sangat tua dan mungkin tidak berlaku lagi. Saya akan mengeditnya ketika saya punya waktu.
Zipp
9

Salah satu fitur yang berfungsi di Select2 tetapi tidak berfungsi di Dipilih, adalah selectelemen di dalam yang memiliki overflow: hiddenatau overflow: auto.

masukkan deskripsi gambar di sini

Masalah terkait untuk Dipilih: https://github.com/harvesthq/chosen/issues/86

Pēteris Caune
sumber
Saya menghadapi masalah yang sama dengan Terpilih.
devXen
1
Anda dapat melakukannya .chosen-drop { z-index: 999999 !important;}untuk memperbaikinya dengan yang dipilih
Alireza Fattahi
6

Beberapa perbedaan yang saya temukan bekerja dengan dua plugin ini:

  • Dengan select2 Anda dapat mencari di lokasi mana saja di dalam opsi. Misalnya, jika Anda memiliki opsi yang disebut ABCDEFG dan Anda mengetikkan CDE, Anda akan mendapatkan opsi itu dalam hasil pencarian tetapi dengan memilih Anda harus mengetik AB .. dan seterusnya untuk mendapatkan hasil.

  • Saya telah menemukan bahwa dengan kumpulan data yang lebih besar, dipilih tampaknya lebih cepat daripada select2, terutama di IE.

reggaemahn
sumber
2
Ya Dipilih tampaknya mencari pada kata-kata, yaitu mengetik Kingdompada halaman contoh mereka akan kembali United Kingdomyang tampaknya cara yang sangat logis untuk melakukannya ditambah Anda dapat menentukan juga $("#element").chosen({ search_contains: true });.
Daniel Sokolowski
2
Saya setuju dengan Anda dan sering demikian yaitu. Anda akan mencari kata-kata. Tetapi dalam banyak kasus di mana Anda memiliki hal-hal dalam kurung seperti 'xyz (abc)' jika Anda mengetik 'abc' Anda juga mencari 'xyz' yang tidak akan dikembalikan. Saya kira, itu bermuara pada skenario di mana Anda menggunakannya. Dalam aplikasi web saya, saya telah menggunakan keduanya di mana mereka relevan. Saya suka memilih sedikit lebih hanya karena itu kecepatan rendering superior di IE.
reggaemahn
5

Select2 mendukung mobile, sedangkan Chosen secara khusus menonaktifkan dirinya di iPod, iPhone dan Android mobile. Jika Anda ingin menggunakan kotak pilih "extended" di ponsel, ini membuat pilihan Anda mudah.

danvk
sumber
@RezaRahmati thx untuk itu. Apakah Anda mencoba iPhone juga kebetulan? harvesthq.github.io/chosen/#faqs mengatakan "Dipilih dinonaktifkan di iPhone, iPod Touch, dan perangkat seluler Android". lebih lanjut tentang github.com/harvesthq/chosen/pull/1388
Adrien Be
@ adrienbe ya saya sudah mengujinya di tab Samsung galaxy dan iPad
Reza
@RezaRahmati apa hasilnya?
Adrien Be
@AdrienBe Berhasil, saya telah menggunakannya di medicfa.com/Users/Create?reloadList=false buka dengan tablet dan periksa hasilnya
Reza
5

Pengalaman saya dengan Select2 sangat bagus di desktop, tetapi pada perangkat seluler sentuh sangat bervariasi, dengan beberapa kebiasaan selalu ada. Sebagai contoh, pada xperia st15i dengan ics dan dropdown browser stock selalu menutup sendiri karena fokus mencuri keyboard. Satu-satunya cara untuk membuka kembali adalah dengan menyentuh menu puluhan kali, tahan jari untuk sihir voodoo kedua dan lainnya. Atau untuk mulai mengetik ketika daftar dropdown ditutup, dan berapa banyak pengguna yang akan mengetahuinya?

Selectize.js tampaknya jauh lebih halus daripada Select2, tetapi ia juga memiliki masalah sendiri pada ponsel misalnya ketika nilai dipilih atau dimasukkan itu memindahkan halaman ke kiri karena beberapa alasan. Juga, pada perangkat Android 2.x yang lebih lama yang tidak mendukung overflow, tidak mungkin untuk memilih melewati beberapa opsi teratas, karena keyboard tidak muncul. :(

Masih harus menguji Terpilih dan mungkin bukan ide yang buruk untuk dinonaktifkan untuk perangkat seluler, tetapi pada akhirnya dropdown lama yang baik selalu berfungsi dan di mana saja.

Pembaruan: sekarang saya juga telah menguji Pilihan yang dipilih, dan lebih baik di satu bidang: tidak berfungsi pada ponsel secara default (hebat!), Tetapi memiliki masalah penyaringan kata. Misalnya, jangan mencari di tengah kata, dan jika Anda menggunakan & nbsp meretas aligment, itu juga akan mengabaikan opsi lengkap. Kembali ke papan gambar.

dev101
sumber
Untuk mengaktifkan pencarian dengan benar di Dipilih, tambahkan search_contains: trueke opsi Anda. Lihat harvesthq.github.io/chosen/options.html
Sicco
1

Mengapa saya memilih select2 daripada Dipilih

Fitur utama select2 telah, bahwa tidak ada kontrol lain secara otomatis, adalah "Hapus semua" pilihan dengan 'x' di sebelah kanan kontrol. Ini adalah fitur pembunuh untuk aplikasi saya. Saya tidak tahu mengapa pustaka tag tambahan lainnya kekurangan fitur ini.

John Zabroski
sumber
0

Select2 mendukung AJAX Dipilih Tidak

Pilih 2 sedikit lebih berat dalam ukuran dibandingkan dengan yang dipilih.

Saya beralih ke Select2 karena tidak ada dukungan resmi untuk operasi ajax.

Yash
sumber