Getting Started

Getting started

Install the package

npm

npm install chosen-jjj

Load jQuery before Chosen, then load the distributed stylesheet and adapter:

<link rel="stylesheet" href="node_modules/chosen-jjj/dist/css/chosen.css">
<script src="jquery.js"></script>
<script src="node_modules/chosen-jjj/dist/js/chosen.jquery.js"></script>

The jQuery adapter also works with AMD and CommonJS loaders. AMD registers a jquery dependency; CommonJS exports the installed $.fn.chosen function. For CommonJS, install jQuery alongside Chosen and make a DOM available before requiring the packages:

const $ = require('jquery');
const chosen = require('chosen-jjj');

$('.chosen-select').chosen();

The Prototype adapter remains a browser-global script. See the package boundaries for import paths and integration details.

Composer

composer require jjj/chosen

Download

The latest GitHub release includes source and compiled archives. Applications normally need one adapter and the compiled CSS from dist/.

Add a select

<label for="project-members">Project members</label>
<select id="project-members" class="chosen-select" multiple
        data-placeholder="Choose project members">
  <option>Ada Lovelace</option>
  <option>Grace Hopper</option>
  <option>Margaret Hamilton</option>
</select>

Initialize it after the element and dependencies are available:

$(".chosen-select").chosen();

Chosen keeps the original select in the document. Read and submit its value exactly as you would without Chosen.

Update options dynamically

Change the native select first, then tell Chosen to rebuild:

$("#project-members")
  .append('<option value="new">New teammate</option>')
  .trigger("chosen:updated");

Destroy an instance

$("#project-members").chosen("destroy");

Upgrade from Harvest Chosen

The maintained npm package is named chosen-jjj; it does not replace the abandoned chosen-js package in place.

1. Replace the package dependency.
2. Replace old asset paths with chosen-jjj/dist/... paths.
3. Rebuild application assets.
4. Review the changelog, especially developer notes for markup changes.
5. Test application CSS that targets Chosen’s generated structure.

The default initialization and underlying select behavior remain compatible. New behaviors are generally opt-in.