Sự khác biệt giữa Chosen và Select2 là gì?

Chosen và Select2 là hai thư viện phổ biến hơn để mở rộng các hộp chọn.

Cả hai dường như được duy trì tích cực, Chosen cũ hơn và hỗ trợ cả jQuery và Prototype.

Select2 chỉ là jQuery, tài liệu của nó cho biết Select2 được lấy cảm hứng từ Chosen, nhưng không nêu chi tiết bất kỳ cải tiến nào được thực hiện (nếu có) hoặc các lý do khác để viết lại.

Hai thư viện có bộ tính năng khá giống nhau, so sánh duy nhất tôi tìm thấy là một trang thử nghiệm jsperf hơi không kết luận.

Có bất kỳ thư viện trong số này có bất kỳ lợi thế hơn so với khác?

Kể từ Chọn2 3.3.1, bên dưới là những gì được ghi lại trong README.md của nó

Chọn 2 có hỗ trợ gì mà Chosen không?

• Làm việc với các bộ dữ liệu lớn: Chosen yêu cầu toàn bộ tập dữ liệu được tải dưới dạng optioncác thẻ trong DOM, điều này giới hạn nó hoạt động với các bộ dữ liệu nhỏ. Select2 sử dụng chức năng để tìm kết quả nhanh chóng, cho phép nó tải một phần kết quả.
• Phân trang kết quả: Vì Select2 hoạt động với các bộ dữ liệu lớn và chỉ tải một lượng nhỏ kết quả phù hợp tại một thời điểm nên nó phải hỗ trợ phân trang. Chọn2 sẽ gọi chức năng tìm kiếm khi người dùng cuộn xuống dưới cùng của tập kết quả hiện đang được tải cho phép 'cuộn vô hạn' kết quả.
• Đánh dấu tùy chỉnh cho kết quả: Chosen chỉ hỗ trợ hiển thị kết quả văn bản vì đó là đánh dấu duy nhất được hỗ trợ bởi optioncác thẻ. Chọn2 cung cấp một điểm mở rộng có thể được sử dụng để tạo ra bất kỳ loại đánh dấu nào để thể hiện kết quả.
• Khả năng thêm kết quả một cách nhanh chóng: Select2 cung cấp khả năng thêm kết quả từ cụm từ tìm kiếm được nhập bởi người dùng, cho phép nó được sử dụng để gắn thẻ.

IMHO Chosen được "duy trì" nhưng không "duy trì tích cực". 341 vấn đề và 51 yêu cầu kéo cho Chosen. Chọn2 có 128 vấn đề và 25 yêu cầu kéo. Tôi nghĩ rằng mô hình cho những điều này là cơ bản

• chọn bất cứ cái nào hấp dẫn hơn đối với bạn
• sử dụng nó trong một hoặc hai ứng dụng
• gặp phải các vấn đề hoặc hạn chế tùy chỉnh
• có thể cố gắng làm việc với cộng đồng thông qua các vấn đề & yêu cầu kéo
• cuối cùng chán ngấy và chỉ tự xây dựng bằng cách sử dụng những gì bạn đã học được trong quá trình này

Bất cứ ai bạn chọn, nếu trường hợp sử dụng của bạn chính xác là ở điểm ngọt ngào của họ, một trong hai sẽ hoạt động. Nếu không, cuối cùng bạn sẽ phải tự viết hoặc tùy chỉnh rất nhiều thứ này. Trong cả hai trường hợp, sự lựa chọn trong đó cụ thể không phải là tất cả quan trọng. Tôi đoán tôi sẽ ở bên cạnh @Andy Ray và @paul ở đây rằng Chọn2 có lẽ là lựa chọn ban đầu tốt hơn.

Một sự khác biệt đáng nói khác là Chosenđược phát triển trong Sassvà CoffeeScripttrong khi đó Select2là đơn giản CSSvà JS. Đó là tùy chọn cá nhân của tôi Sassvà CoffeeScriptlà các lớp phức tạp không cần thiết khiến việc gỡ lỗi trở nên khó khăn.

Sau khi thử cả hai, tôi đã quyết định không sử dụng - cố gắng Select2tạo chức năng tạo vật phẩm hóa ra lại là một vấn đề rất nhiều lông vì bạn chỉ đơn giản là không thể làm điều đó khi gắn liền với <select>các yếu tố - tôi cảm thấy không ổn khi nghĩ ra những cái vòng tôi sẽ có để nhảy qua.

Tôi đã giải quyết bằng cách sử dụng selectize.js , chỉ cần thêm <option>...</option>phần tử mới vào DOM của biểu mẫu - và đó là điều lành mạnh. Nó cũng sử dụng LESS- nhưng tôi sẽ bỏ qua điều đó và chỉ điều chỉnh phần được biên dịch CSStrực tiếp trong dự án của bạn.

chọn.js so với select2.js

• Giấy phép MIT cho cả hai
• Phụ thuộc:
  • Chọn2: jQuery
  • Được chọn: tbc
• Hỗ trợ trình duyệt máy tính để bàn:
  • Chọn2: IE8 +
  • Được chọn: IE8 +
• Hỗ trợ thiết bị:
  • Chọn2: không rõ ràng
  • Được chọn: bị vô hiệu hóa trên thiết bị di động iPhone, iPod Touch và Android
• Trọng lượng (rút gọn):
  • Chọn2: 57KB
  • Được chọn: 27KB
• Cách sử dụng: Select2 hỗ trợ giao diện người dùng "ưa thích" hơn (xem 'mẫu')
• Cả hai repos mã đều có sẵn trên Github
  • Chọn2: đóng góp: rất tích cực
  • Lựa chọn: đóng góp: ít hơn khoảng 3 lần so với Chọn2

ps. Tôi sẽ cố gắng cập nhật câu trả lời này khi tôi tìm hiểu thêm về những điểm còn thiếu

Đầu tiên, hãy để tôi nói với bạn rằng Chosen và Select2 là hai plugin tuyệt vời và đây là kinh nghiệm cá nhân của tôi về Chosen. Tất cả những gì họ đang nói là đúng liên quan đến Chosen.

Các vấn đề được trỏ bởi Pēteris Caune với selectđược 2 tuổi và vẫn không có sửa chữa chính thức. Đơn giản là không có tài liệu tốt cho API. Nó đã được chỉ ra (xem vấn đề 671) nhiều lần nhưng vẫn không có gì. Phải mất gần 2 năm để giải quyết vấn đề này , nơi cơ bản được chọn sẽ không hoạt động nếu bạn ẩn div overflow:hiddentrước khi hiển thị nó (và bạn phải sử dụng mộtwitdh:X% tùy chọn mà về cơ bản bạn sẽ không bao giờ biết nếu bạn không tìm kiếm vấn đề).

Tôi muốn nói rằng vấn đề chính là tốc độ sửa chữa như DelvarWorld đã nói trong số 92:

Yêu cầu kéo của tôi khắc phục vấn đề này, nhưng giống như yêu cầu khác của tôi và nhiều người trong số họ đã chọn, họ đang bị bỏ qua. Dự án này có quá nhiều người đóng góp với quá ít cơ sở mã.

Lần đầu tiên tôi chọn Chosen cho giấy phép MIT nhưng tôi gặp phải tất cả các vấn đề (cắt giảm, không tìm thấy API, tìm hàng giờ để ẩn tràn), vì vậy tôi quyết định chuyển sang select2 vì nó có tài liệu tốt hơn, không có lỗi cắt giảm và sửa chữa nhanh hơn.

Một tính năng hoạt động trong Chọn2 nhưng không hoạt động trong Chosen, là selectbên trong phần tử có overflow: hiddenhoặc overflow: auto.

Vấn đề tương ứng cho Chosen: https://github.com/harvesthq/chosen/issues/86

Một số khác biệt tôi đã tìm thấy khi làm việc với hai plugin này:

• Với select2, bạn có thể tìm kiếm tại bất kỳ vị trí nào trong tùy chọn. Ví dụ: nếu bạn có một tùy chọn có tên ABCDEFG và bạn nhập CDE, bạn sẽ nhận được tùy chọn đó trong kết quả tìm kiếm nhưng với lựa chọn, bạn phải nhập AB .. và cứ thế để có kết quả.

• Tôi đã thấy rằng với các bộ dữ liệu lớn hơn, được chọn dường như nhanh hơn select2, đặc biệt là trong IE.

Select2 hỗ trợ cho thiết bị di động, trong khi Chosen đặc biệt vô hiệu hóa chính nó trên iPod, iPhone và Android di động. Nếu bạn muốn sử dụng các hộp chọn "mở rộng" trên thiết bị di động, điều này giúp bạn lựa chọn dễ dàng.

Trải nghiệm của tôi với Select2 là tuyệt vời trên máy tính để bàn, nhưng trên các thiết bị di động cảm ứng rất đa dạng, với một số quirks luôn hiện diện. Ví dụ: trên xperia st15i với trình đơn thả xuống ics và trình duyệt chứng khoán luôn đóng cửa vì lấy cắp bàn phím. Cách duy nhất để mở nó một lần nữa là chạm vào menu hàng chục lần, giữ ngón tay trong một giây và phép thuật voodoo khác. Hoặc để bắt đầu nhập trong khi danh sách thả xuống được đóng lại, và có bao nhiêu người dùng sẽ tìm ra điều này?

Selectize.js có vẻ mượt hơn nhiều so với Select2, nhưng nó cũng có vấn đề riêng trên thiết bị di động, ví dụ như khi giá trị được chọn hoặc nhập vào, nó sẽ di chuyển trang sang bên trái vì một số lý do. Ngoài ra, trên các thiết bị Android 2.x cũ hơn không hỗ trợ tràn, không thể chọn qua một vài tùy chọn hàng đầu, vì bàn phím không bật lên. :

Vẫn phải kiểm tra Chosen và có thể đó không phải là một ý tưởng tồi để bị vô hiệu hóa cho các thiết bị di động, nhưng cuối cùng, việc thả xuống cũ tốt luôn hoạt động ở mọi nơi.

Cập nhật: bây giờ tôi cũng đã thử nghiệm Chosen, và nó tốt hơn ở một khu vực: mặc định nó không hoạt động trên thiết bị di động (tuyệt vời!), Nhưng nó có vấn đề về từ ngữ. Ví dụ: không tìm kiếm ở giữa các từ và nếu bạn sử dụng & nbsp hack cho các thuật toán, nó cũng sẽ bỏ qua các tùy chọn hoàn chỉnh. Quay lại bảng vẽ.

Tại sao tôi chọn select2 trên Chosen

Tính năng chính select2 có, mà không có điều khiển nào khác có tự động kỳ diệu, là các lựa chọn "Xóa tất cả" với 'x' ở bên phải của điều khiển. Đây là một tính năng sát thủ cho ứng dụng của tôi. Tôi không biết tại sao các thư viện nâng cao thẻ chọn khác lại thiếu tính năng này.

Select2 hỗ trợ AJAX Chosen Không

Chọn 2 nặng hơn một chút so với chọn.

Tôi đã chuyển sang Chọn2 vì không có hỗ trợ chính thức cho các hoạt động ajax.