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.

$(".chosen-select-group-chips").chosen({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.

$(".chosen-select").chosen({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.

 $(".chosen-select").chosen({no_results_template: "No match for {search}."}); 

No search yet.

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

$(".chosen-select").chosen({max_selected_options: 5});

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

 $(".chosen-select").bind("chosen:maxselected", function () { ... }); 

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.

$(".chosen-select-summary").chosen({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.

$(".chosen-select-paste").chosen({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.

$(".chosen-select").chosen({
  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( … );

• 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.

  $("#form_field").trigger("chosen:updated");

• Destroying Chosen

  To destroy Chosen and revert back to the native select:

  $("#form_field").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(document.querySelector("#remote-select"), {
  load: loadProjects,
  subscribe: function(search) {
    var field = $("#remote-select");
    var handler = function(event, data) {
      search(data.search_term);
    };
    field.on("chosen:search_updated", handler);
    return function() { field.off("chosen:search_updated", handler); };
  },
  update: function() { $("#remote-select").trigger("chosen:updated"); }
});

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

 $(".chosen-select").chosen({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:

$("#width-dropdown").chosen({width: "180px", dropdown_width: "300px"});

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

$("#css-width-select").chosen({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.

$("#mobile-project").chosen({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.

$("#recipe-search").chosen({
  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.

$("#recipe-word-boundary").chosen({
  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.

$("#recipe-matcher").chosen({
  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.

$(".chosen-select-prefix-highlight").chosen({
  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.

$("#recipe-create").chosen({
  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.

$("#recipe-selected").chosen({
  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.

$("#recipe-shift-range").chosen({ 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.