chosen
A JavaScript library that transforms long, unwieldy HTML select boxes into user-friendly, searchable dropdowns.
What is chosen?
Chosen is a JavaScript library that transforms standard HTML select boxes into more user-friendly, searchable dropdowns. It solves the problem of unwieldy select elements with long lists by adding filtering, multi-select capabilities, and improved styling. The library enhances form usability without requiring a complete overhaul of existing HTML structures.
Frontend developers and web designers building forms with long select lists, particularly those using jQuery or Prototype frameworks who need better user interaction.
Developers choose Chosen for its simplicity, framework compatibility (jQuery and Prototype), and ability to significantly improve select box usability with minimal code changes. It's a lightweight, focused solution that doesn't require complex configuration.
Overview
Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.
Use Cases
Best For
- Enhancing forms with long country or state dropdown lists
- Adding search functionality to product category selectors
- Improving multi-select interfaces for tag selection
- Creating more accessible select boxes for large datasets
- Upgrading legacy jQuery applications with better form controls
- Building admin interfaces with complex filter dropdowns
Not Ideal For
- Modern single-page applications using frameworks like React or Vue, as Chosen relies on jQuery or Prototype for integration.
- Projects requiring long-term support and active maintenance, since Chosen is deprecated and not under active development.
- Applications with extremely large datasets needing virtual scrolling or advanced performance optimizations beyond basic search filtering.
- Teams seeking a framework-agnostic, lightweight solution without dependencies on legacy JavaScript libraries.
Pros & Cons
Pros
Adds a search input to filter long lists of options quickly, enhancing usability for forms with extensive data like country selectors, as highlighted in the key features.
Supports selecting multiple options with a clean, tag-like display, improving user experience for categories or tags without complex code changes.
Works with jQuery 1.7+ and Prototype 1.7+, making it a practical upgrade for legacy web applications, as confirmed in the README.
Available via Bower, npm, and Composer for straightforward installation, though package names vary, which is noted in the documentation.
Cons
The README explicitly states it's not under active development, meaning no new features, bug fixes, or security updates, posing a risk for production use.
Only compatible with older frameworks like jQuery and Prototype, lacking integration with modern JavaScript ecosystems such as React or Vue.
Package names differ across managers (e.g., 'chosen-js' for npm vs. 'chosen' for Bower), leading to potential installation errors, as admitted in the README.
Frequently Asked Questions
Related Projects
select2Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
selectize.jsSelectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.