Select2 Enhanced Dropdowns

Long dropdown lists—dozens of categories, countries, or product attributes—are hard to use as native HTML selects. WPEnhanced Ajax Filter Blocks integrates Select2 to add search, keyboard navigation, and cleaner styling to filter dropdowns.

Select2 is included in the free plugin. Enable it globally and per filter item.

When to use Select2

Use Select2	Skip Select2
15+ options in a select	Fewer than ~10 options
Attributes like brand, country, author	Single category dropdown
Multi-select with many choices	Checkbox lists where all options should stay visible
Mobile-unfriendly native selects on some browsers	Simple two- or three-option filters

Select2 works on Filter Posts Item controls where Filter type is Select.

Enable globally

1. In WordPress admin, go to WP Enhanced → WPEnhanced Ajax Filter Blocks (plugin settings).
2. Open the General or Scripts section (wording may vary by version).
3. Enable Select2 for filter dropdowns site-wide.
4. Save settings.

Global enable loads the Select2 library on pages that use Ajax Filter blocks. If Select2 is off globally, per-item toggles have no effect.

See Plugin settings.

Enable per filter item

On each Filter Posts Item with Filter type → Select:

1. Open Select settings in the block sidebar.
2. Turn on Enable Select2.
3. Optionally set First option text (placeholder row, default: “-- Select Option --”).
4. Choose Display mode — Single or Multi select.

tip

The in-editor help text notes: enable Select2 on the filter item and ensure the global plugin setting is on.

Display modes

Mode	Visitor experience
Single	One choice at a time; selecting replaces the previous value
Multi	Multiple tags/chips; pairs with OR/AND relation on checkbox settings where applicable

Multi-select Select2 suits “choose any of these brands” patterns without showing a long checkbox list.

Behaviour with AJAX filtering

Select2 dropdowns participate in the same AJAX cycle as native selects:

• On change update method — choosing an option triggers an immediate loop refresh
• On button click — selection is staged until the visitor clicks Search

Select2 re-initializes after AJAX DOM updates so enhanced dropdowns keep working on refreshed filter markup.

Styling

Select2 inherits theme and plugin CSS. Customize appearance via:

• Filter Posts → Design → Filter fields — Input background, text, focus colours
• Filter Posts Item → Design → Fields — Per-item overrides
• Theme custom CSS targeting .select2-container if needed

Match Select2 container width to your sidebar by setting Filter width on the item when using horizontal fullwidth layouts.

Accessibility notes

Select2 improves keyboard search for long lists but changes native select semantics. For legally sensitive accessibility requirements, test with your target WCAG level. Short critical filters (e.g. sort order) may be better as radio buttons.

Common issues

Issue	Fix
Dropdown looks like a plain select	Confirm global Select2 setting is saved; hard-refresh cache
Dropdown breaks after AJAX	Usually a theme script conflict—check browser console
Double initialization / frozen dropdown	Another plugin may also load Select2; test with other plugins disabled

Example: brand select with search

Setting	Value
Source	Taxonomy → product_brand
Filter type	Select
Enable Select2	On
First option text	All brands
Display mode	Single

See also Common filter setups.

What's next

• Filter Posts Item block — Select settings reference
• Plugin settings — Global Select2 toggle
• Common filter setups — Attribute dropdown recipe