Chosen is a library for making long, unwieldy select boxes more user friendly.
- jQuery support: 1.4+
- Prototype support: 1.7+
For documentation, usage, and examples, see:
http://harvesthq.github.com/chosen
Contributions and pull requests are very welcome. Please follow these guidelines when submitting new code.
- Make all changes in Coffeescript files, not JavaScript files.
- For feature changes, update both jQuery and Prototype versions
- Use 'cake build' to generate Chosen's JavaScript file and minified version.
- Don't touch the VERSION file
- Submit a Pull Request using GitHub.
First, make sure you have the proper CoffeeScript / Cake set-up in place.
- Install Coffeescript: the CoffeeScript documentation provides easy-to-follow instructions.
- Install UglifyJS:
npm -g install uglify-js - Verify that your $NODE_PATH is properly configured using
echo $NODE_PATH
Once you're configured, building the JavasScript from the command line is easy:
cake build # build Chosen from source
cake watch # watch coffee/ for changes and build Chosen
If you're interested, you can find the recipes in Cakefile.
- Built by Harvest
- Concept and development by Patrick Filler
- Design and CSS by Matthew Lettini
- Chosen for MooTools, by Jules Janssen
- Chosen Drupal 7 Module, by Pol Dell'Aiera
Adds ability to start out with an empty SELECT element that is populated by user choices that are auto-completed using AJAX requests.
For example, if one starts out with a SELECT element like the one below:
<select data-placeholder="Choose a Country..." class="chzn-select chzn-dynamic" data-dynamic-search="true" style="width: 350px;"
data-search-url="/search/location_tokens?type=country" tabindex="2" name="single_select_chosen_country" />
Then as the user types characters, AJAX requests are made to the URI "/search/location_tokens?type=country&q=al" where "al" is whatever the user has typed so far.
The response expected from this AJAX request is a JSON collection that resembles this:
[{"name": "Australia", "id": 123}, {"name": "Italy", "id": 234}, {"name": "Malaysia", "id": 345}, {"name": "New Zealand", "id": 456}, {"name": "Portugal", "id": 567}]
These hashes are used to dynamically create items that are then presented to the user to choose from. When the user makes a selection that item is dynamically added to the SELECT element as an OPTION element with the SELECTED attribute set, the VALUE attribute set to the ID of the item and the HTML content of the OPTION element set to the NAME of the item.
That is essentially how it works. It is a quick-n-dirty solution and could have been implemented more elegantly, but I was time boxed to only a couple of days to get it working and I had never used CoffeeScript before.
Good luck!