select2/pages/13.advanced/02.default-adapters/06.dropdown/docs.md

---

title: Dropdown taxonomy:

category: docs

---

The dropdown adapter defines the main container that the dropdown should be held in. Select2 allows you to change the way that the dropdown works, allowing you to do anything from attach it to a different location in the document or add a search box.

It is common for decorators to attach to the render and position methods to alter how the dropdown is altered and positioned.

This adapter can be overridden by assigning a custom adapter to the dropdownAdapter configuration option.

select2/dropdown

Decorators

AttachBody

By default, Select2 will attach the dropdown to the end of the body and will absolutely position it to appear below the selection container.

select2/dropdown/attachBody

Attached to body

<div class="col-sm-6">
  <div class="alert alert-warning">
    <strong>Heads up!</strong>
    This will cause DOM events to be raised outside of the standard
    Select2 DOM container. This can cause issues with
    third-party components such as modals.
  </div>
</div>

When the dropdown is attached to the body, you are not limited to just
displaying the dropdown below the container. Select2 will display above
the container if there is not enough space below the container, but there
is enough space above it. You are also not limited to displaying the
dropdown within the parent container, which means Select2 will render
correctly inside of modals and other small containers.

AttachContainer

select2/dropdown/attachContainer

Attached below the container

Select2 can place the dropdown directly after the selection container, so
it will appear in the same location within the DOM as the rest of Select2.

<div class="col-sm-6">
  <div class="alert alert-warning">
    <strong>Check your build.</strong> This module is only included in the
    <a href="index.html#builds-full" class="alert-link">full builds</a> of
    Select2.
  </div>
</div>

<strong>
  <a href="https://harvesthq.github.io/chosen/">Harvest Chosen</a>
  migrators!
</strong>
If you are migrating to Select2 from Chosen, this option will cause
Select2 to position the dropdown in a similar way.

DropdownSearch

select2/dropdown/search

Users can filter down the results by typing a search term into a box that
is displayed at the top of the dropdown.

A search box is added to the top of the dropdown automatically for select
boxes where only a single option can be selected.

MinimumResultsForSearch

select2/dropdown/minimumResultsForSearch

Minimum results to display the search box

When working with smaller data sets, the search box can take up more space
that is necessary, as there are not enough results for filtering to be
effective. Select2 allows you to only display the search box when the
number of search results reaches a certain threshold.

<div class="col-sm-6">
  <dl class="dl-horizontal">
    <dt>Key</dt>
    <dd><code>minimumResultsForSearch</code></dd>

    <dt>Value</dt>
    <dd>integer</dd>
  </dl>
</div>

CloseOnSelect

select2/dropdown/closeOnSelect

Close the dropdown when a result is selected

Select2 will automatically close the dropdown when an element is selected,
similar to what is done with a normal select box.  This behavior can be
changed though to keep the dropdown open when results are selected,
allowing for multiple options to be selected quickly.

<div class="col-sm-6">
  <dl class="dl-horizontal">
    <dt>Key</dt>
    <dd><code>closeOnSelect</code></dd>

    <dt>Default</dt>
    <dd><code>true</code></dd>
  </dl>
</div>

If this decorator is not used (or <code>closeOnSelect</code> is set to
<code>false</code>), the dropdown will not automatically close when a
result is selected.  The dropdown will also never close if the
<kbd>ctrl</kbd> key is held down when the result is selected.