Vanilla JavaScript Edition

Vanilla JavaScript edition

chosen-jjj/native enhances an existing <select> without jQuery, Prototype, or React. This edition is experimental; the default package entry remains the jQuery adapter. The native select still owns submitted values and dispatches bubbling input and change events when a user changes the selection.

Try the interactive Vanilla demo or read the full guide.

Use it

import { Chosen } from 'chosen-jjj/native';
import 'chosen-jjj/native/styles.css';

const select = document.querySelector('#project');
const chosen = new Chosen(select, { search_contains: true });

Edit the original select and call chosen.update() to refresh the control. Call chosen.destroy() to restore the original select. For a browser script, load dist/native/chosen.css and dist/native/chosen.native.js, then use new ChosenNative.Chosen(select, options).

What to try

• Search and select within single, multiple, and grouped examples.
• Remove a selected chip. Selected result rows have a check mark by default; opt into deselect_selected_results to make them removable from the list.
• Switch between light and dark themes, try a narrow window, and compare control borders, chips, group spacing, and dropdown corners with React.
• Submit or reset the form. The native select supplies its values.

The adapter parity inventory records edition-specific APIs and remaining gaps. Vanilla uses snake_case options and native DOM events. See Styling and themes for the standalone stylesheet and shared theme tokens.