Chosen และ Select2 ต่างกันอย่างไร?

157

ChosenและSelect2เป็นไลบรารี่ที่ได้รับความนิยมเพิ่มอีกสองตัวเพื่อขยาย selectboxes

ดูเหมือนว่าทั้งสองจะได้รับการบำรุงรักษาอย่างแข็งขัน 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 license หรือ GPL v2 is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2

— พอล

92

ตั้งแต่ Select2 3.3.1 ด้านล่างเป็นเอกสารใน README.md

Select2 รองรับอะไรที่เลือกไม่ได้?

การทำงานกับชุดข้อมูลขนาดใหญ่: การเลือกจะต้องโหลดชุดข้อมูลทั้งหมดเป็นoptionแท็กใน DOM ซึ่ง จำกัด ให้ทำงานกับชุดข้อมูลขนาดเล็ก Select2 ใช้ฟังก์ชันเพื่อค้นหาผลลัพธ์แบบทันทีซึ่งอนุญาตให้โหลดผลลัพธ์ได้บางส่วน

การเพจของผลลัพธ์: เนื่องจาก Select2 ทำงานกับชุดข้อมูลขนาดใหญ่และโหลดผลลัพธ์การจับคู่เพียงจำนวนเล็กน้อยในแต่ละครั้งเพื่อสนับสนุนการเพจ Select2 จะเรียกใช้ฟังก์ชั่นการค้นหาเมื่อผู้ใช้เลื่อนไปที่ด้านล่างของชุดผลลัพธ์ที่โหลดในปัจจุบันซึ่งอนุญาตให้มีการ 'เลื่อนแบบไม่สิ้นสุด' ของผลลัพธ์

มาร์กอัปที่กำหนดเองสำหรับผลลัพธ์: เลือกสนับสนุนเฉพาะการแสดงผลข้อความเนื่องจากเป็นoptionแท็กที่สนับสนุนโดยแท็กเท่านั้น Select2 มีจุดส่วนขยายที่สามารถใช้สร้างมาร์กอัปชนิดใดก็ได้เพื่อแสดงผลลัพธ์

ความสามารถในการเพิ่มผลลัพธ์ได้ทันที: Select2 มอบความสามารถในการเพิ่มผลลัพธ์จากข้อความค้นหาที่ป้อนโดยผู้ใช้ซึ่งอนุญาตให้ใช้สำหรับการแท็ก

— นาย 14
แหล่งที่มา

2

คน FWIW ได้ทำงานบน "ผลเพิ่มได้ทันที" คุณสมบัติในการได้รับการแต่งตั้ง: github.com/shezarkhani/chosen/tree/create_new_optionsฉันกำลังใช้ชนิดของการปรับตัวของมันบางอย่างใน ExpressionEngine Add-on MX Select Plus (มันเป็นวิธีการที่ ฉันมาที่นี่เพราะตอนนี้มีส่วนเสริมแข่งขันโดยใช้ Select2)

— notacouch

ควรสังเกตว่า Select2 ไม่มีทางเลือกเมื่อปิดการใช้งาน Javascript เนื่องจากตัวเลือกจะถูกเติมผ่าน AJAX

— Deathlock

10

ไม่มีสิ่งใดที่ดึงข้อมูลผ่าน AJAX จะใช้งานได้หากไม่มี Javascript Select2 ทำงานได้ดีกับค่าที่เติมไว้ล่วงหน้าและไม่จำเป็นต้องใช้ AJAX

— zachzurn

@notacouch "Matrix Support" และ "Low Variables Support" และ "SafeCracker support" คืออะไร? แนวคิดเหล่านี้มีความเฉพาะเจาะจงสำหรับ ExpressionEngine หรือไม่

— John Zabroski

@JohnZabroski ใช่พวกเขาเป็นส่วนเสริมของ EE 2.x เชิงพาณิชย์ (iirc SafeCracker อาจถูกสร้างขึ้น)

— notacouch

40

IMHO Chosen คือ "บำรุงรักษา" แต่ไม่ "บำรุงรักษาอย่างแข็งขัน" ปัญหา 341 ฉบับและคำขอดึง 51 ครั้งสำหรับ Chosen Select2 มีปัญหา 128 เรื่องและคำขอการดึง 25 ครั้ง ฉันคิดว่ารูปแบบสำหรับสิ่งเหล่านี้เป็นพื้น

เลือกสิ่งที่ดึงดูดความสนใจจากคุณมากกว่าคนอื่นเพียงผิวเผิน
ใช้ในแอพหรือสอง
ชนกับปัญหาการปรับแต่งหรือข้อ จำกัด
อาจลองทำงานกับชุมชนผ่านทางปัญหา & ดึงคำขอ
ในที่สุดก็เบื่อหน่ายและเพียงสร้างของคุณเองโดยใช้สิ่งที่คุณเรียนรู้ในกระบวนการนี้

แล้วแต่กรณีที่คุณเลือกถ้ากรณีการใช้งานของคุณอยู่ในจุดที่น่าสนใจของพวกเขาทั้งสองจะทำงาน ถ้าไม่คุณจะต้องเขียนของคุณเองหรือปรับแต่งเหล่านี้อย่างหนัก ไม่ว่าในกรณีใดทางเลือกหนึ่งที่ไม่เฉพาะเจาะจงนั้นสำคัญ ฉันเดาว่าฉันจะเข้าร่วมกับ @Andy Ray และ @paul ที่นี่ว่า Select2 น่าจะเป็นตัวเลือกเริ่มต้นที่ดีกว่า

— ปีเตอร์ลียง
แหล่งที่มา

4

ในมุมมองของฉันปัญหาเพิ่มเติมหมายถึงผู้คนมากขึ้นและใช้ และชุมชนที่ใหญ่กว่ามีแนวโน้มที่จะสร้างรหัสที่ดีขึ้น AngularJS: 397 ฉบับ, 49 คำขอแบบดึง; joyent / node: ปัญหา 476 เรื่อง, 98 pull reqs ฉันสงสัยว่าตัวเลขจะเป็นของ firefox, linux kernel หรือ gcc

— พอล

ใช่มันเป็นเพียงแค่ฮิวริสติก ตามทฤษฎีแล้ววิดเจ็ตการเลือกอัตโนมัติควรมีความซับซ้อนน้อยกว่าหลายลำดับเช่นจอยสติ๊ก / โหนด สิ่งเหล่านี้กลายเป็นธรรมเนียมอย่างมากดังนั้นฉันจึงรู้สึกว่าผู้คนกำลังยื่นคำร้องขอแบบดึงซึ่งทำให้ไม่สนใจแล้วพวกเขาก็แยกทางแยกหรือเขียนใหม่ YMMV

— Peter Lyons

เพียงแค่ทราบว่าแผนของคุณจะไปพร้อมกับวิธีการปรับแต่ง: Chosen มีรหัสจำนวนน้อย (ประมาณ 1 ใน 3) แต่มีการเขียนใน CoffeeScript และ SASS (ก่อนที่จะรวบรวมเป็น JS / CSS) หากคุณคุ้นเคยกับ CoffeeScript อยู่แล้วตัวเลือกของคุณก็ง่าย: เลือกได้ง่ายกว่าที่จะเข้าใจและปรับแต่ง

— Tim Dorr

@Peter Lyons เหล่านี้เป็นตัวชี้วัดที่แปลกประหลาดที่ใช้ในการวาดข้อสรุปของคุณ (ไม่ใช่ว่าฉันไม่เห็นด้วยกับข้อสรุปของคุณ) ดูจำนวนผู้มีส่วนร่วม (Select2 = 239 v. Chosen = 73) แต่นั่นอาจทำให้เข้าใจผิด พัลส์และกราฟของการแสดงผลโครงการ GitHub แต่ละครั้งก่อให้เกิดประวัติและความถี่พร้อมด้วยสถิติที่มีประโยชน์อื่น ๆ มากมายเพื่อทำการตัดสินใจอย่างชาญฉลาดว่าโครงการใดที่อาจ "คงไว้" และ "กำลังอยู่ระหว่างการพัฒนา"

— cfx

FWIW, Chosen ได้อัปเดตเป็นจำนวนมากในช่วงสองสามปีที่ผ่านมา

— Charles Wood

21

อีกความแตกต่างมูลค่าการกล่าวขวัญคือChosenการพัฒนาในSassและCoffeeScriptในขณะที่Select2เป็นธรรมดาและCSS JSมันเป็นตัวเลือกส่วนบุคคลของฉันSassและCoffeeScriptมีความซับซ้อนที่ไม่จำเป็นซึ่งทำให้การดีบักยากขึ้น

หลังจากลองทั้งคู่แล้วฉันก็ตัดสินใจที่จะไม่ใช้ - พยายามที่จะSelect2สร้างฟังก์ชั่นไอเท็มกลายเป็นเรื่องที่มีขนดกมากเพราะคุณไม่สามารถทำได้เมื่อติดกับ<select>องค์ประกอบ - มันแค่รู้สึกไม่ค่อยดี เพื่อข้ามผ่าน

ฉันได้ตัดสินโดยใช้selectize.jsซึ่งเพิ่งเพิ่ม<option>...</option>องค์ประกอบใหม่ให้กับ DOM ของฟอร์ม - และนั่นคือเหตุผล มันยังใช้LESS- แต่ฉันจะข้ามมันและเพียงแค่ปรับแต่งคอมไพล์CSSในโครงการของคุณโดยตรง

— Daniel Sokolowski
แหล่งที่มา

2

selectize.jsการใช้งานน้อย นั่นเป็นจุดจบของเทคโนโลยีSassหรือไม่?

— Chris Wesseling

ไม่มันอยู่ในโดเมนเดียวกัน แต่จากสาม selectize.js ต้องการ tweaking น้อยที่สุดเพื่อให้พอดีกับโครงการ

— Daniel Sokolowski

selectize มีปัญหาเกี่ยวกับภาพใน Firefox 28

— MEM

@MEM คุณสามารถเฉพาะเจาะจงมากขึ้น

— Daniel Sokolowski

ใน Firefox 28 (Mac OS X) คุณจะสังเกตเห็น "ขอบหรือช่องว่างภายในหรือขอบ" สีเทาพิเศษด้านล่างแต่ละช่องใส่ ฉันคิดว่ามันไม่ใช่เอฟเฟกต์ มันจะต้องไม่สอดคล้องกันของภาพ เห็นได้ชัดเมื่อเราดูพวกเขาใน FF และตัวอย่างความผิดพลาดแบบเดียวกันไม่ได้เกิดขึ้นใน Chrome

— MEM

18

selected.js เทียบกับ select2.js

ใบอนุญาต MIT สำหรับทั้งสอง
อ้างอิง:
- เลือก 2: jQuery
- เลือก: tbc
การสนับสนุนเบราว์เซอร์เดสก์ท็อป:
- เลือก 2: IE8 +
- เลือก: IE8 +
การสนับสนุนอุปกรณ์:
- เลือก 2: ไม่ชัดเจน
- เลือก: ปิดใช้งานบนอุปกรณ์มือถือ iPhone, iPod Touch และ Android
น้ำหนัก (ย่อ):
- เลือก 2: 57KB
- เลือก: 27KB
การใช้งาน: Select2 รองรับ UI "แฟนซี" มากขึ้น (ดู 'เทมเพลต')
รหัส repos ทั้งสองมีอยู่ใน Github
- เลือก 2: การมีส่วนร่วม: ทำงานมาก
- เลือก: การมีส่วนร่วม: ประมาณ 3x น้อยกว่า Select2

select2.js ผลงาน selected.js ผลงาน

PS ฉันจะพยายามอัปเดตคำตอบนี้เมื่อฉันค้นหาข้อมูลเพิ่มเติมเกี่ยวกับประเด็นที่ขาดหายไป

— Adrien Be
แหล่งที่มา

Select2 ควรสนับสนุนอุปกรณ์มือถือเช่นเดียวกับคนอื่น ๆ เราพยายามทำให้แน่ใจว่ามันใช้งานได้ดีเช่นเดียวกับฟังก์ชั่นการใช้งานที่กำหนดไว้ทั้งหมดในทุกอุปกรณ์

— Kevin Brown

1

ฉันคิดว่าเหตุผลหลักที่ select2 นั้นแอคทีฟมากกว่านั้นคือพวกเขากำลังทำงานบน select2 4.x ซึ่งเป็นการเขียนซ้ำครั้งใหญ่ ฉันไม่เข้าใจว่าทำไมผู้คนให้ความสำคัญกับการมีส่วนร่วมมาก ฉันหวังว่า GitHub จะมีแผนภาพการไหลสะสมที่ติดตามสิ่งสำคัญเช่นการครอบคลุมโค้ดและกรณีทดสอบตลอดจนเวลาตอบสนองเฉลี่ยสำหรับปัญหา! (ฉันใช้ select2, btw, จุดของฉันเป็นเพียงสัตว์เลี้ยงโกรธทั่วไปเกี่ยวกับคนที่มุ่งเน้นไปที่การมีส่วนร่วมและวิศวกรรมสังคมที่ได้รับการสนับสนุนโดยแผนภูมิด้านบน)

— John Zabroski

13

อันดับแรกให้ฉันบอกคุณว่า Chosen และ Select2 เป็นปลั๊กอินที่ยอดเยี่ยมสองรายการและนี่คือประสบการณ์ส่วนตัวของฉันเกี่ยวกับ Chosen ทุกสิ่งที่พวกเขาพูดนั้นเป็นเรื่องจริงเกี่ยวกับการคัดเลือก

ปัญหาชี้โดย Peteris Caune กับselectอายุ 2 ปีและยังคงไม่มีการแก้ไขอย่างเป็นทางการ ไม่มีเอกสารที่ดีสำหรับ 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

— ᴍᴀᴛᴛʙᴀᴋᴇʀ

คำตอบนี้เก่ามากและอาจใช้ไม่ได้อีกต่อไป ฉันจะแก้ไขเมื่อมีเวลา

— ซิป

9

คุณสมบัติหนึ่งที่ทำงานใน Select2 แต่ไม่ทำงานในได้รับการแต่งตั้งเป็นselectองค์ประกอบภายในที่มีหรือoverflow: hiddenoverflow: auto

ป้อนคำอธิบายรูปภาพที่นี่

ปัญหาที่สอดคล้องกันสำหรับ Chosen: https://github.com/harvesthq/chosen/issues/86

— Pēteris Caune
แหล่งที่มา

ฉันกำลังเผชิญหน้ากับปัญหาเดียวกันกับ Chosen

— devXen

1

คุณสามารถ.chosen-drop { z-index: 999999 !important;}แก้ไขได้ด้วยตัวเลือก

— Alireza Fattahi

6

ความแตกต่างบางประการที่ฉันได้พบการทำงานกับปลั๊กอินทั้งสองนี้:

ด้วย select2 คุณสามารถค้นหาได้ทุกที่ในตัวเลือก ตัวอย่างเช่นหากคุณมีตัวเลือกที่เรียกว่า ABCDEFG และคุณพิมพ์ใน CDE คุณจะได้รับตัวเลือกนั้นในผลการค้นหา แต่เมื่อเลือกคุณจะต้องพิมพ์ AB .. และอื่น ๆ เพื่อให้ได้ผลลัพธ์
ฉันพบว่ามีชุดข้อมูลขนาดใหญ่ที่เลือกดูเหมือนว่าจะเร็วกว่า select2 โดยเฉพาะใน IE

— reggaemahn
แหล่งที่มา

2

ใช่เลือกได้ดูเหมือนว่าจะค้นหาคำที่พิมพ์Kingdomบนหน้าตัวอย่างของพวกเขาจะกลับมาUnited Kingdomซึ่งดูเหมือนว่าวิธีการทำมันตรรกะมากบวกกับคุณสามารถระบุ$("#element").chosen({ search_contains: true });ได้

— Daniel Sokolowski

2

ฉันเห็นด้วยกับคุณและบ่อยครั้งที่เป็นกรณีเช่น คุณกำลังมองหาคำ แต่ในหลาย ๆ กรณีที่คุณมีสิ่งต่าง ๆ ในวงเล็บเช่น 'xyz (abc)' ถ้าคุณพิมพ์ 'abc' คุณก็จะมองหา 'xyz' ซึ่งจะไม่ถูกส่งคืน ฉันเดาว่ามันน่าตื่นเต้นสำหรับสถานการณ์ที่คุณใช้ในแอปพลิเคชันบนเว็บของฉันฉันได้ใช้ทั้งสองอย่างนี้เกี่ยวข้องกัน ฉันชอบที่จะเลือกมากกว่านี้เพราะความเร็วในการแสดงผลที่เหนือกว่าใน IE

— reggaemahn

5

Select2 รองรับมือถือในขณะที่ Chosen ปิดการใช้งานตัวเองโดยเฉพาะใน iPods, iPhone และ Android มือถือ หากคุณต้องการใช้กล่องเลือก "ขยาย" บนมือถือสิ่งนี้จะทำให้การเลือกของคุณเป็นเรื่องง่าย

— danvk
แหล่งที่มา

@RezaRahmati ขอบคุณสำหรับสิ่งนั้น คุณลอง iPhone ด้วยหรือไม่? harvesthq.github.io/chosen/#faqsกล่าวว่า "Chosen ถูกปิดใช้งานบน iPhone, iPod Touch และอุปกรณ์มือถือ Android" เพิ่มเติมเกี่ยวกับgithub.com/harvesthq/chosen/pull/1388

— Adrien เป็น

@adrienbe ใช่ฉันได้ทำการทดสอบบนแท็บ Samsung galaxy และ iPad

— Reza

@RezaRahmati ผลลัพธ์คืออะไร?

— เอเดรียนเป็น

@AdrienBe มันใช้งานได้ฉันได้ใช้มันในmedicfa.com/Users/Create?reloadList=falseเปิดมันด้วยแท็บเล็ตและตรวจสอบผลลัพธ์

— Reza

5

ประสบการณ์ของฉันกับ Select2 นั้นยอดเยี่ยมบนเดสก์ท็อป แต่บนอุปกรณ์มือถือแบบสัมผัสมีความหลากหลายมากโดยมีนิสัยแปลก ๆ อยู่เสมอ ตัวอย่างเช่นบน xperia st15i ที่มี ics และ dropdown browser ของเบราว์เซอร์จะปิดตัวเองเสมอเนื่องจากแป้นพิมพ์ขโมยโฟกัส วิธีเดียวที่จะนำมันเปิดอีกครั้งคือการสัมผัสเมนูหลายสิบครั้งกดนิ้วค้างไว้เป็นวินาทีและเวทมนตร์วูดูอื่น ๆ หรือจะเริ่มพิมพ์ในขณะที่รายการแบบเลื่อนลงปิดอยู่และมีผู้ใช้กี่คนที่จะเข้าใจสิ่งนี้?

Selectize.js ดูเหมือนจะราบรื่นกว่า Select2 มาก แต่ก็มีปัญหาเกี่ยวกับตัวเองบนมือถือเช่นเมื่อเลือกหรือป้อนค่ามันจะย้ายหน้าไปทางซ้ายด้วยเหตุผลบางประการ นอกจากนี้สำหรับอุปกรณ์ Android 2.x รุ่นเก่าที่ไม่รองรับการโอเวอร์โฟลว์มันเป็นไปไม่ได้ที่จะเลือกผ่านตัวเลือกอันดับต้น ๆ เนื่องจากแป้นพิมพ์ไม่ป๊อปอัป :(

ยังคงต้องทดสอบ Chosen และอาจไม่ใช่ความคิดที่ดีที่จะถูกปิดการใช้งานสำหรับอุปกรณ์มือถือ แต่ท้ายที่สุดแล้วเมนูแบบเลื่อนลงแบบเก่าจะทำงานได้ทุกที่ทุกเวลา

อัปเดต: ตอนนี้ฉันได้ทดสอบ Chosen แล้วและดีกว่าในด้านเดียว: ใช้งานไม่ได้บนมือถือตามค่าเริ่มต้น (ดีมาก!) แต่มีปัญหาในการกรองคำ ยกตัวอย่างเช่นไม่ได้ค้นหาในช่วงกลางของคำและถ้าคุณใช้& nbspสับสำหรับ aligments ก็ยังจะไม่สนใจตัวเลือกที่สมบูรณ์แบบ กลับไปที่กระดานวาดภาพ

— dev101
แหล่งที่มา

หากต้องการเปิดใช้งานการค้นหาใน Chosen search_contains: trueให้เพิ่มตัวเลือกของคุณ ดูharvesthq.github.io/chosen/options.html

— ซิกโก้

1

ทำไมฉันถึงเลือก select2 มากกว่า Chosen

คุณสมบัติหลัก select2 มีซึ่งไม่มีตัวควบคุมอื่นใดที่มีคุณสมบัติอัตโนมัติอย่างน่าอัศจรรย์คือการเลือก "ล้างทั้งหมด" ด้วย 'x' ทางด้านขวาของตัวควบคุม นี่คือคุณสมบัตินักฆ่าสำหรับแอปพลิเคชันของฉัน ฉันไม่รู้ว่าเพราะเหตุใดห้องสมุดการปรับปรุงแท็กอื่น ๆ จึงขาดคุณสมบัตินี้

— John Zabroski
แหล่งที่มา

0

Select2 รองรับ AJAX Chosen Does't

เลือก 2 น้อยกว่าขนาดที่เลือกเล็กน้อย

ฉันเปลี่ยนเป็น Select2 เพราะไม่มีการสนับสนุนอย่างเป็นทางการสำหรับการดำเนินงาน ajax

— Yash
แหล่งที่มา