JQuery Select Box Components - dipilih vs Select2

Artikel ini dikaji semula oleh Martín Martínez dan Chris Perry. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik! Adakah anda pernah bekerja dalam projek, dan seolah -olah ada sesuatu yang dimatikan secara visual? Mungkin projek itu hampir selesai, tetapi beberapa elemen tidak kelihatan begitu baik? Ini mungkin butiran kecil, tetapi mereka membuat perbezaan.

Jika projek anda mengandungi kotak pilih yang tidak menarik dan anda ingin menambah lebih banyak ciri kepada mereka, anda akan mendapati dipilih dan memilih2 sangat berguna. Ini adalah dua plugin jQuery yang membantu gaya kotak pilihan anda untuk meningkatkan rupa mereka, menyesuaikan tingkah laku mereka dan menjadikannya lebih mesra pengguna.

Dalam artikel ini, saya akan meletakkan kedua-dua plugin ini kepala ke kepala, dan membandingkan ciri-ciri dan kes penggunaannya, supaya anda dapat membuat pilihan yang tepat untuk yang terbaik untuk anda.

Takeaways Key

dipilih dan pilih2 adalah plugin jQuery yang meningkatkan fungsi kotak pilihan, meningkatkan rupa dan keramahan pengguna. Walaupun dipilih adalah plugin yang boleh dipercayai dan mantap, ia tidak diselenggarakan secara aktif sebagai select2, yang kerap menambah ciri dan integrasi baru.

• Kedua -dua plugin menyokong teks pemegang tempat, biarkan carian dalam pilihan, dan menawarkan keupayaan untuk mengehadkan bilangan pilihan. Walau bagaimanapun, SELECT2 juga menyediakan pilihan untuk tidak memilih pilihan apabila lungsur turun dibuka, ciri yang belum dilaksanakan dalam dipilih.
• Select2 menonjol dengan ciri -ciri tambahannya, termasuk akses programatik, penandaan, tokenisasi, dan templat. Ia juga menyokong Ajax dan menawarkan pilihan penyesuaian yang lebih maju, menjadikannya alat yang lebih berkuasa untuk kotak pilihan.
• Semasa dipilih adalah pilihan yang baik untuk penambahbaikan kotak pilih asas, SELECT2 disyorkan untuk ciri -ciri yang lebih canggih dan kemas kini biasa. Select2 juga menawarkan dokumentasi yang komprehensif, menjadikannya lebih mudah untuk dilaksanakan dan digunakan dalam projek.
Pemasangan

Kedua -duanya dipilih dan Select2 boleh didapati melalui GitHub. Ini bermakna anda boleh mengklon repositori masing -masing dan mendapatkan fail yang anda perlukan.

Jika tidak, anda boleh memasang kedua -dua plugin dengan Bower (yang berfungsi sebagai antara muka kepada GitHub). Jika Bower adalah laluan pilihan anda, anda juga boleh merebut jQuery semasa anda berada di sana.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

Jika tidak, ambil fail dari CDN pilihan anda (mis. CDNJs) dan masukkannya di halaman anda dengan cara yang biasa. Inilah yang saya lakukan dalam templat di bawah yang boleh anda gunakan untuk mengikuti bersama -sama dengan contoh -contoh dalam tutorial.

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

dipilih

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

SELECT2

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

adakah projek -projek yang diselenggarakan secara aktif?

seperti yang anda boleh katakan dengan melawat halaman GitHubnya, pembangunan plugin yang dipilih tidak aktif seperti yang pernah berlaku dan versi terkini dari tarikh yang dipilih dari Febraury 6th 2014. Ini bukan untuk mengatakan bahawa perpustakaan telah ditinggalkan - jauh dari situ! Sebaliknya pemaju telah sampai ke tempat yang mereka mahukan dan ia tetap menjadi plugin yang boleh dipercayai dan mantap.

Sebaliknya dengan SELECT2 di sisi lain dan perbezaannya dapat dilihat. Pembangunan perpustakaan ini akan menjadi lebih tinggi dan baru -baru ini mengeluarkan versi keempat rasmi (4.0.0). Ini bermakna ciri -ciri baru sedang ditambah, sementara yang lain ditahan dan/atau dikeluarkan.

Satu lagi metrik berguna mungkin jumlah soalan dengan tag ini pada limpahan stack. Anda boleh mencuba ini untuk diri sendiri di sini: http://stackoverflow.com/tags

Jika anda menaip "Select2" dan kemudian sebaliknya bahawa "dipilih", anda akan melihat bahawa terdapat lebih banyak aktiviti di sekitar plugin SELECT2. Anda juga akan melihat bahawa ia mempunyai beberapa integrasi, seperti dengan AngularJS dan Ruby on Rails.

pilih kotak dan ruang letak

pilih2 dan pilih Tukar cara kotak pilihan mudah dan berbilang muncul.

Dalam pelbagai kotak pilih dengan HTML tulen, pengguna dapat melihat beberapa pilihan yang terdapat dalam senarai. Ini tidak menarik secara visual dan perubahan mesti dibuat untuk pandangan ini. Dipilih dan pilih2 Keluarkan "paparan senarai" dan senarai pilihan akan muncul apabila anda mengklik di dalam kotak Pilih. Hanya kemudian anda boleh membuat pilihan.

Anda boleh mencari pilihan anda dengan kedua -dua plugin. Cukup klik di dalam kotak dan kemudian taipkan watak pertama pilihan anda, maka hasilnya akan muncul dalam masa nyata mengikut carian anda.

SELECT2 menjadikannya lebih mudah untuk membatalkan pilihan yang telah dipilih. Apabila lungsur turun dibuka, anda boleh mengklik mana -mana elemen yang dipilih untuk membatalkannya. Dipilih belum melaksanakan ciri ini.

kedua -duanya dipilih dan pilih teks placeholder sokongan untuk kotak pilihan tunggal dan berganda.

bilangan pilihan terhad

Kadang -kadang dalam kotak pilih berganda, anda perlu mengehadkan bilangan pengguna pilihan pilih. Kelebihan menggunakan pilihan dan select2 ialah anda boleh menukar bilangan pilihan yang sangat mudah.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Anda boleh mengehadkan bilangan pilihan yang boleh dipilih dari kotak pelbagai pilihan dengan kedua-dua plugin, walaupun perlu diperhatikan bahawa versi pilihan ciri ini lebih maju. Selepas anda mencapai had, jika anda cuba memilih pilihan tambahan, acara dipanggil.

Dalam contoh ini, pengguna diminta untuk memilih dua hari yang paling produktif dalam minggu mereka. Apabila mereka cuba memilih hari ketiga, pilihan akan memanggil acara. Saya telah menetapkan dipilih untuk menambah amaran menunjukkan bahawa had telah dicapai:

Lihat Bilangan Penempatan Terhad Pilihan: Dipilih vs Select2 oleh SitePoint (@SitePoint) pada Codepen.

Reka bentuk responsif

Orang akan melihat halaman anda pada pelbagai peranti supaya kotak pilih, seperti komponen lain di laman web anda, harus responsif. Kedua -dua pilihan yang dipilih dan Select2 Sokongan lebar dengan peratusan dan ciri hampir sama pada kedua -dua mereka. Ini membantu membuat kotak pilih responsif yang mengambil kira saiz skrin atau lebar tetingkap penyemak imbas.

Satu -satunya perbezaan yang dipilih dan Select2 mempunyai ciri ini, adalah kod. Anda boleh mengisytiharkan lebar select2 di dalam tag pilih dalam HTML. Lihat di bawah untuk memahami betapa berguna untuk membuat kotak pilih responsif dan visual lebih baik dengan dipilih dan pilih2.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Ciri -ciri serupa yang lain

Dipilih dan Select2 mempunyai ciri-ciri umum yang lain, tetapi saya ingin melihat tiga ciri yang saya dapati menarik: hasil yang dilumpuhkan, kotak carian tersembunyi, dan sokongan kanan ke kiri (RTL).

Hasil Kurang Upaya

Yang paling menarik adalah hasil yang dilumpuhkan. Dengan pilihan ini, dipilih dan pilih Sorotan Pilihan yang diaktifkan. Anda boleh melihat pilihan kurang upaya, tetapi anda tidak boleh memilihnya. Keputusan kurang upaya biasanya akan ditetapkan untuk menghalang pengguna daripada memilih pilihan sehingga beberapa keadaan lain telah dipenuhi. Ciri ini menjadikan kotak pilihan anda menjadi alat yang berkuasa dan ia meningkatkan penglibatan dengan pengguna jika anda belajar cara menggunakannya mengikut keperluan anda.

Untuk membiarkan plugin tahu bahawa anda telah mengaktifkan hasil kurang upaya, tambahkan atribut dilumpuhkan = "dilumpuhkan" ke tag pilihan di mana anda akan menggunakan ciri ini.

<span>max_selected_options: 2 // Chosen Plugin
</span>

Dalam contoh yang dipilih pengguna hanya boleh memilih pilihan yang tersedia di lokasi geografi mereka, tetapi mereka juga dapat melihat pilihan lain walaupun mereka tidak tersedia:

Lihat pen yang dipilih vs select2: Hasil dilumpuhkan oleh SitePoint (@SitePoint) pada codepen.

menyembunyikan kotak carian

Apabila anda tidak mempunyai banyak pilihan dalam senarai pilihan dalam kotak pilih tunggal, disarankan untuk menyembunyikan kotak carian. Dalam dipilih, untuk menyembunyikan kotak carian, anda harus menggunakan disable_search_threshold dan tetapkan nilai yang lebih besar daripada bilangan pilihan dalam kotak pilih anda.

<span>maximumSelectionLength: 2 // Select2 Plugin
</span>

<!-- Chosen - HTML -->
<select >
  ...
</select>

Logik yang sama terpakai kepada SELECT2, tetapi satu -satunya perubahan adalah istilah, bukannya disable_search_threshold ia dipanggil minimumResultsforsearch.

<span>// Chosen - JavaScript
</span><span>$(".responsiveChosen").chosen({width: "50%"});
</span>

Satu perkara yang perlu saya tambahkan mengenai Select2 ialah anda boleh menyembunyikan kotak carian secara kekal tanpa bimbang tentang bilangan pilihan yang anda miliki dalam kotak Pilih anda. Anda boleh melakukan ini dengan menetapkan minimumResultSforsearch ke Infinity.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

sokongan kanan-ke-kiri (RTL)

Sebilangan besar laman web ditulis dalam bahasa yang berbeza dengan abjad yang berbeza dan selain itu, beberapa bahasa ini dibaca dari arah yang lain. Adalah dinasihatkan bahawa kotak pilih harus menyesuaikan dengan peraturan bahasa-bahasa ini dan mengalihkan arah mereka dari LTR (kiri-ke-kanan) ke RTL. Ini meningkatkan pengalaman pengguna dan meningkatkan kebolehgunaan laman web anda untuk pengguna rantau itu.

Kedua-duanya dipilih dan pilih Sokongan teknik kanan ke kiri dalam kotak pilihan. Satu-satunya perbezaan yang mereka ada ialah Select2 memerlukan anda untuk mengisytiharkan sokongan RTL dalam fail JavaScript, sementara itu dalam dipilih anda hanya menambah kelas RTL yang dipilih bersama dengan kelas terpilih yang dipilih dalam HTML.

mengapa memilih select2 over dipilih

Walaupun Select2 diilhamkan oleh yang dipilih, dan mempunyai kebanyakan ciri yang dipilih, penyumbangnya tidak berhenti di sana. Mereka dibina dalam beberapa ciri yang paling keren untuk kotak pilihan termasuk akses programatik, templat, mod kurang upaya, penandaan, dan tokenisasi. Ia juga mempunyai sokongan untuk Ajax.

Akses Programatik

Akses Programatik mengambil kotak pilihan ke tahap yang lain. Mereka sangat berguna digabungkan dengan pelbagai kotak pilihan. Anda boleh menambah butang yang bertindak pada kotak pilih ini mengikut peraturan anda menggunakan JavaScript.

Jika beberapa pilihan dalam kotak pilih berganda mempunyai beberapa logik yang menghubungkan antara satu sama lain dan mengikut pemerhatian anda, pilihan "dikaitkan" ini mempunyai kebarangkalian besar untuk dipilih dari banyak pengguna, maka berguna untuk memilih ini pilihan dengan satu klik.

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Dalam contoh ini, anda boleh dengan cepat menetapkan 'Swift' dan 'Objective-C' dengan mengklik butang "IOS Technologies":

Lihat Pen Select2 - Kaedah Programmatic oleh SitePoint (@SitePoint) pada Codepen.

penandaan

Penandaan adalah satu lagi ciri Select2 yang menjadikan kotak pilihan lebih kuat dan memanjangkan had kotak pilihan biasa. Ia membolehkan pengguna menambah pilihan baru yang belum ada dalam senarai pilihan.

Tagging juga sangat berguna dalam kes apabila pelbagai pilihan sangat besar, dan anda tidak boleh menaip semua pilihan dalam senarai pilihan. Apabila penandaan diaktifkan, dan pengguna tidak dapat mencari pilihan mereka dalam senarai, ia "menolak" mereka untuk membuat tag pilihan mereka.

Berhati -hati apabila anda menggunakan penandaan walaupun, kerana ia boleh disalahgunakan oleh pengguna "berniat jahat" yang memasuki tag tidak sah yang tidak sesuai dengan objektif kotak pilih.

Untuk membolehkan penandaan, anda harus menetapkan pilihan tag kepada benar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Lihat pen yang dipilih vs select2: penandaan oleh sitepoint (@sitePoint) pada codepen.

tokenisasi

Setelah tag ditetapkan kepada benar, pilihan untuk memasukkan pemisah token menjadi tersedia. Selepas memasukkan nama tag, taipkan satu daripada pemisah token yang ditentukan. Kemudian tag dimasukkan sebagai pilihan dalam senarai pilihan. Pemisah token berfungsi sebagai pintasan untuk membuat tag dengan menaip aksara dari papan kekunci anda.

Dengan bantuan SELECT2, anda boleh membuat pemisah token dengan watak yang anda inginkan. Dalam contoh berikut empat pemisah token digunakan: /, ,,; dan "" (ruang).

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

Cubalah dengan menaip pilihan baru, diikuti oleh salah satu aksara pemisah untuk memilihnya dan tambahkannya ke senarai pilihan:

Lihat pen Select2 - Tokenisasi oleh SitePoint (@SitePoint) pada codepen.

templating

Salah satu ciri yang paling kuat dari SELECT2 ialah templating. Templating membolehkan kami menyesuaikan rupa komponen yang dipaparkan oleh SELECT2. Ciri ini boleh digunakan untuk menggabungkan input minimum yang disediakan oleh tag pilihan dengan imej atau komponen lain untuk membuat paparan visual untuk pengguna.

Contoh ini menggabungkan templat Select2 dengan glikikon Bootstrap:

Lihat templating pen Select2 oleh SitePoint (@SitePoint) pada codepen.

Kesimpulan

Walaupun dipilih mempunyai beberapa pilihan yang bagus di dalamnya, Select2 menawarkan lebih banyak dari segi ciri yang tersedia untuk digunakan dengan kotak pilih. Dipilih adalah pilihan yang baik jika anda menggabungkannya dalam "aliran" laman web anda, tetapi jika anda ingin mengakses ciri -ciri yang lebih canggih, maka pilih2 adalah pilihan yang lebih baik.

Saya sangat mengesyorkan menggunakan SELECT2; Ia dikemas kini lebih kerap daripada yang dipilih dan mempunyai bug yang lebih sedikit. Satu perkara yang saya dapati sangat membantu mengenai Select2 ialah dokumentasinya. Semasa anda membacanya, anda boleh menggunakan komponen Select2 dalam projek anda dengan cepat.

Jika anda mempunyai pengalaman yang baik atau buruk menggunakan yang dipilih atau pilih2, beritahu saya di bahagian komen di bawah.

Soalan Lazim (Soalan Lazim) Mengenai JQuery Select Box Components: Dipilih vs Select2

Apakah perbezaan utama antara dipilih dan pilih2?

Dipilih dan Select2 adalah kedua -dua plugin jQuery yang popular yang digunakan untuk meningkatkan fungsi kotak pilih. Perbezaan utama di antara mereka terletak pada ciri -ciri dan kebolehgunaan mereka. Select2 menyokong Ajax, yang membolehkannya berfungsi dengan dataset besar dengan memuatkannya dengan cepat sebagai jenis pengguna. Ia juga menyokong penandaan dan menatal tak terhingga. Dipilih, sebaliknya, tidak menyokong Ajax atau penandaan, tetapi ia menawarkan ciri carian mesra pengguna dan antara muka yang lebih mudah. ​​

Bagaimana saya melaksanakan SELECT2 dalam projek saya?

Untuk melaksanakan SELECT2, anda perlu memasukkan fail CSS dan JavaScript Select2 CSS dan JavaScript dalam projek anda. Kemudian, anda boleh memulakan select2 pada mana -mana kotak pilih dengan menggunakan $ (". MySelectBox"). Select2 (); perintah. Anda juga boleh menyesuaikan tingkah laku Select2 dengan meluluskan pilihan ke fungsi Select2 (). Dalam projek yang sama, ia umumnya tidak disyorkan. Kedua -dua plugin bertujuan untuk meningkatkan fungsi kotak pilihan, dan menggunakannya bersama -sama boleh membawa kepada konflik dan tingkah laku yang tidak dijangka. Adalah lebih baik untuk memilih yang paling sesuai dengan keperluan anda.

Bagaimana saya boleh menyesuaikan penampilan Select2 dan dipilih? Anda boleh menukar warna, fon, saiz, dan aspek lain penampilan mereka dengan mengatasi gaya lalai mereka dalam fail CSS anda sendiri. Sangat sesuai untuk mengendalikan dataset besar terima kasih kepada sokongan Ajaxnya. Anda boleh mengkonfigurasi SELECT2 untuk mengambil data dengan cepat sebagai jenis pengguna, yang menghalang keperluan untuk memuat semua data pendahuluan. Ini dapat meningkatkan prestasi dengan ketara apabila bekerja dengan dataset yang besar. atau bertindak balas. Walau bagaimanapun, anda mungkin perlu menggunakan pembalut atau perpustakaan tambahan untuk memastikan keserasian. Apabila anda memulakan yang dipilih pada kotak pilih, kotak carian ditambah secara automatik. Pengguna boleh menaip ke dalam kotak ini untuk menapis pilihan dalam kotak Pilih.

Bagaimana saya mengendalikan pelbagai pilihan dengan SELECT2 dan dipilih? Anda boleh mengaktifkan ciri ini dengan menambahkan atribut berganda ke kotak pilih anda. Apabila pelbagai pilihan diaktifkan, pengguna boleh memilih lebih daripada satu pilihan dari kotak pilih. Pelayar, tetapi mereka juga menawarkan sokongan terhad untuk peranti mudah alih. Walau bagaimanapun, disebabkan oleh pelbagai jenis pelayar dan peranti mudah alih, beberapa ciri mungkin tidak berfungsi seperti yang diharapkan. peristiwa yang boleh anda dengar dan bertindak balas. Sebagai contoh, anda boleh mendengar acara perubahan untuk menjalankan fungsi apabila pengguna membuat pilihan. Anda boleh melampirkan pendengar acara menggunakan kaedah .on () dalam jQuery.

Atas ialah kandungan terperinci JQuery Select Box Components - dipilih vs Select2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!