Tame unwieldy select boxes.

Give each optgroup a class and set inherit_optgroup_classes: true. Selected chips then carry their group class for styling. Try selecting one item from each group.

new Chosen($("group-chip-multiple"), {inherit_optgroup_classes: true, width: "100%"});

Chosen automatically highlights selected options and removes disabled and / or hidden options. Try Kodiak Bear, which has a label attribute but no option text.

The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options.

 new Chosen($("chosen_select_field"),{disable_search_threshold: 10}); 

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Without that attribute, it uses the select's placeholder, then a type-specific placeholder_text_single or placeholder_text_multiple option, then the shared placeholder_text option. Otherwise it shows "Select an Option" or "Select Some Options". An explicitly empty value removes the placeholder text.

<select data-placeholder="Choose a country..." multiple class="chosen-select">

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list - or include an element with the same label as the placeholder and set the hidden, selected and disabled attributes on it for a more graceful degradation on devices Chosen does not support:

<option value="" selected disabled hidden>Choose a country...</option>

Set the message with no_results_text, or place the search term with no_results_template and its {search} marker. Type an unmatched search, then clear it to see the chosen:no_results and chosen:no_results_clear events below.

new Chosen($("chosen_select_field"),{no_results_template: "No match for {search}."}); 

No search yet.

You can easily limit how many options the user can select:

new Chosen($("chosen_select_field"),{max_selected_options: 5}); 

If you try to select another option with limit reached chosen:maxselected event is triggered:

$("chosen_select_field").observe("chosen:maxselected", function(evt) { ... }); 

Use max_items_shown to keep a long multiple selection compact. The remaining choices are still selected; the summary button reveals them without changing the underlying select. This is separate from max_selected_options, which limits how many choices can be selected.

new Chosen($("summary-select"), {max_items_shown: 2});

Copy Atlas, Beacon; Comet, click the search area below, and paste. Chosen selects those existing options. Try adding Unknown to see unmatched text stay available for editing.

new Chosen($("paste-select"), {paste_multiple_values: true});

Multiple selects can add opt-in bulk actions. Select all applies to the currently filtered enabled options; Deselect all clears every enabled choice. With an empty search, use Command/Ctrl+A to select all or Command/Ctrl+Shift+A to deselect all.

new Chosen($("chosen_select_field"), {
  allow_select_all: true,
  allow_deselect_all: true
});

When a single select box isn't a required field, you can set allow_single_deselect: true and Chosen will add a UI element for option deselection. The selection can also be cleared with Backspace or Delete when the closed control is focused. Enter opens its dropdown, and Up from the first highlighted result closes it. Deselection requires a blank first option.

You can set right-to-left text by setting rtl: true

 $(".chosen-select").chosen({rtl: true}); 

• Observing Form Field Changes

  When working with form fields, you often want to perform some behavior after a value has been selected or deselected. Whenever a user selects a field in Chosen, it triggers a "change" event on the original form field. That lets you do something like this:

  $("#form_field").chosen().change( … );

  Note: Prototype doesn't offer support for triggering standard browser events. Event.simulate is required to trigger the change event when using the Prototype version.

• Updating Chosen Dynamically

  If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

  Event.fire($("form_field"), "chosen:updated");

• Destroying Chosen

  To destroy Chosen and revert back to the native select, call destroy on the Chosen instance:

  chosen = new Chosen($("form_field"));
  
  // ...later
  chosen.destroy();

Type at least two letters, then select a returned project and search again. The opt-in chosen-jjj/remote API loads a bounded page, ignores stale responses, and keeps selected values in the native select. Replace the demo provider with your server request. See the remote search guide.

ChosenRemote.connectRemoteSelect($("remote-select"), {
  load: loadProjects,
  subscribe: function(search) {
    var field = $("remote-select");
    var handler = function(event) {
      search(event.memo.search_term);
    };
    field.observe("chosen:search_updated", handler);
    return function() { field.stopObserving("chosen:search_updated", handler); };
  },
  update: function() { $("remote-select").fire("chosen:updated"); }
});

Using a custom width with Chosen is as easy as passing an option when you create Chosen:

new Chosen($("chosen_select_field"),{width: "95%"}); 

Use dropdown_width when the results need more room than the closed control. A custom-width dropdown floats as a separate surface so the unequal edges do not look accidentally connected:

new Chosen($("width-dropdown"), {width: "180px", dropdown_width: "300px"});

Set width: false to leave the generated container's width to CSS:

new Chosen($("css-width-select"), {width: false});

#css_width_select_chosen { width: 24rem; max-width: 100%; }

For options loaded later, enable recalculate_width_on_update so chosen:updated can resize the control.

On a narrow touch screen, this opt-in picker fills the visible viewport. Search or scroll the longer list, then choose a project or use Close. On desktop it remains a regular dropdown.

new Chosen($("mobile-project"), {mobile_fullscreen: true});

Use labels just like you would with a standard select. This demo sets open_on_label_click: false, so clicking either label focuses its closed Chosen control without opening the dropdown. You can also drag across a label to select its text without activating Chosen.

Search “espresso” for the Café alias, “cafe” without the accent, or “project blue” with the words out of order. This example also waits for two characters before showing results. See the options reference for custom matchers, result limits, and search timing.

new Chosen($("recipe-search"), {
  split_search_terms: true,
  min_search_length: 2,
  normalize_search_text: function(text) {
    if (text.normalize) {
      return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
    }
    return text.replace(/[éèêë]/g, "e");
  }
});

JavaScript's default word boundary can treat an accented letter as punctuation. This opt-in boundary keeps Danish letters within a word. Search “ller” (no match), then “Møl” (one match). Supply a boundary pattern for the languages your options use.

new Chosen($("recipe-word-boundary"), {
  search_word_boundary: "^|[^A-Za-zÆØÅæøå]"
});

To match only from the start, including punctuation, combine enable_split_word_search: false with search_contains: true. Try searching for <01M; the option with a preceding word stays hidden.

An option marked data-chosen-always-visible remains available when a search has no match. Search for “France” here, choose “Other”, then enter a country name. The original select still holds the submitted choice.

A custom search_matcher can replace built-in matching. This one only offers SKU-backed options, even before typing. Custom matches have no automatic text highlighting.

new Chosen($("recipe-matcher"), {
  search_matcher: function(query, item) {
    return !item.group && item.value.indexOf("SKU-") === 0 &&
      item.text.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  }
});

Type “a” in both controls. search_contains keeps React in the results, while highlight_prefix_matches makes Angular the initial keyboard choice. The list stays in the original order.

new Chosen($("prefix-preferred"), {
  search_contains: true,
  highlight_prefix_matches: true
});

Type a new project name and choose “Add project” to append it to the original multiple select. Existing matches remain available; an exact match does not offer a duplicate.

new Chosen($("recipe-create"), {
  create_option: true,
  persistent_create_option: true,
  skip_no_results: true
});

The closed control can display option values while its dropdown keeps the labels. Open this multiple select and click a selected result to remove it. The underlying select still holds the actual values.

new Chosen($("recipe-selected"), {
  display_selected_value: true,
  deselect_selected_results: true,
  hide_results_on_select: false
});

Select Atlas, reopen the list if needed, then Shift-click Delta. Chosen adds the visible options between them, skips the disabled Comet option, and leaves any existing choices selected.

new Chosen($("recipe-shift-range"), { shift_select_range: true });

On a multiple select, select-by-group makes each optgroup label select its available options. The separate readonly control keeps its value enabled for form submission while preventing changes.