1. Select2

เป็นทางเลือกที่ใช้ jQuery สำหรับ select boxes รองรับการค้นหา, tagging, ชุดข้อมูลระยะไกล, การเลื่อนแบบไม่สิ้นสุด, และตัวเลือกอื่นๆ ที่ใช้งานบ่อย

Framework Support:

  • React: รองรับทางอ้อมผ่าน wrappers อย่าง react-select2-wrapper
  • Angular: สามารถรวมเข้ากับ directives หรือ wrappers ของบุคคลที่สาม
  • Vue.js: มี wrappers อย่าง vue-select2

Github Stars: 26,000+

NPM Weekly Downloads: ~597,343

Bundle size: ประมาณ 27 KB (minified)

First Release: มีนาคม 2012

Latest Release: 28 มกราคม 2020 (v4.0.13)

Website: https://select2.org

Github: https://github.com/select2/select2

Live Demo:

ตัวเลือกเขตเวลาแบบกลุ่มที่ค้นหาได้ด้วย Select2

2. Choices.js

Choices.js เป็นไลบรารี JavaScript ขนาดเล็กที่ไม่มีการพึ่งพาสำหรับการสร้าง dropdown ที่ปรับแต่งได้, tag inputs, และ autocomplete fields มันมีความยืดหยุ่นสูง, การออกแบบสมัยใหม่, และการเข้าถึง ทำให้เหมาะสำหรับการปรับปรุงฟอร์มโดยไม่ต้องพึ่ง jQuery

Framework Support:

  • React: สามารถรวมเข้ากับ wrappers ที่กำหนดเอง
  • Angular: การรวมเข้าทำได้ผ่าน directives
  • Vue.js: สามารถรวมเข้ากับ components ที่กำหนดเอง

GitHub Stars: 6,400+

NPM Weekly Downloads: ~179,897

Bundle Size: ประมาณ 78 KB (minified)

First Release: ตุลาคม 2016

Latest Release: กุมภาพันธ์ 2025 (v11.0.6)

Website: https://choices-js.github.io/Choices

Github: https://github.com/Choices-js/Choices

Live Demo:

ตัวเลือกเขตเวลาแบบกลุ่มที่ค้นหาได้ด้วย Choices.js

3. Tom Select

Tom Select เป็นไลบรารี JavaScript ขนาดเล็กที่มีฟีเจอร์ครบครันสำหรับการสร้าง select boxes ที่ปรับแต่งได้, autocomplete inputs, และ tag inputs มันรองรับการโหลดข้อมูลระยะไกล, การนำทางด้วยคีย์บอร์ด, และ multi-select ทำให้เป็นทางเลือกที่ดีสำหรับ Select2 ด้วยการออกแบบที่ทันสมัยและไม่มีการพึ่งพา

Framework Support:

  • React: มี wrapper สำหรับ React อย่างเป็นทางการ
  • Angular: การรวมเข้าทำได้ผ่าน directives ที่กำหนดเอง
  • Vue.js: มี wrapper สำหรับ Vue อย่างเป็นทางการ

GitHub Stars: 1,800+

NPM Weekly Downloads: ~91,842

Bundle Size: ประมาณ 53 KB (minified)

First Release: พฤศจิกายน 2020

Latest Release: กุมภาพันธ์ 2025 (v2.4.3)

Website: https://tom-select.js.org/

Github: https://github.com/orchidjs/tom-select

Live Demo:

ตัวเลือกเขตเวลาแบบกลุ่มที่ค้นหาได้ด้วย Tom Select

4. React Select

React-Select เป็นไลบรารี dropdown ที่สวยงาม, ยืดหยุ่น และปรับแต่งได้สูงสำหรับ React มันรองรับการค้นหา, async, multi-select, และตัวเลือกแบบกลุ่ม ทำให้เหมาะสำหรับการจัดการชุดข้อมูลขนาดใหญ่ ด้วยการเข้าถึงและธีมที่สร้างขึ้นมา มันจึงเป็นตัวเลือกที่ดีสำหรับแอปพลิเคชัน React สมัยใหม่

Framework Support:

  • React: ออกแบบมาสำหรับแอปพลิเคชัน React โดยเฉพาะ

GitHub Stars: 27,900+

NPM Weekly Downloads: ~4,328,556

First Release: พฤศจิกายน 2020

Latest Release: กรกฎาคม 2018 (react-select@5.10.1)

Website: https://react-select.com

Github: https://github.com/JedWatson/react-select

Live Demo:

ตัวเลือกเขตเวลาแบบกลุ่มที่ค้นหาได้ด้วย React Select

5. Downshift

Downshift เป็นไลบรารี dropdown และ autocomplete ที่ไม่มีหัวสำหรับ React มันให้ส่วนประกอบที่ยืดหยุ่น, เข้าถึงได้, และปรับแต่งได้เพื่อสร้าง select boxes, autocomplete inputs, และ comboboxes โดยไม่บังคับรูปแบบใดๆ เหมาะสำหรับนักพัฒนาที่ต้องการควบคุม UI อย่างเต็มที่ในขณะที่ยังคงรักษาการเข้าถึง WAI-ARIA

Framework Support:

  • React: ออกแบบมาสำหรับแอปพลิเคชัน React โดยเฉพาะ

GitHub Stars: 12,200+

NPM Weekly Downloads: ~1,335,528

First Release: สิงหาคม 2017

Latest Release: สิงหาคม 2024 (v9.0.8)

Website: https://www.downshift-js.com

Github: https://github.com/downshift-js/downshift

Live Demo: