How to Use Select2 Input Fields for Bricks Builder Native AJAX Filters

Bricks Builder’s default AJAX filters use basic <select> dropdowns. While functional, these dropdowns lack searchability and a better user experience. This guide will show you how to replace Bricks’ default select fields with Select2, while keeping full AJAX filtering functionality.

Why Use Select2 for Bricks Builder Filters?

• Enhances usability with a searchable, styled dropdown.
• Ensures Bricks’ AJAX filtering continues to work properly.
• Keeps the default select hidden to prevent UI flickering.
• Re-initialises Select2 after filtering to ensure it stays applied.

By default, this method will target all Bricks Builder AJAX filter select fields. If you only want to apply Select2 to a specific filter, follow the instructions at the end of this guide.

Step 1: Load Select2 on Your Site

Before applying Select2 to Bricks filters, ensure Select2 is loaded on your site.

If Select2 is not already enqueued, add this to your theme’s functions.php:

function enqueue_select2_for_bricks_filters() {
    wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css');
    wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_select2_for_bricks_filters');

Step 2: Add the JavaScript to Replace Bricks’ Select Fields

To convert Bricks’ filter dropdowns into Select2, add this JavaScript.

jQuery(document).ready(function($) {
  const filterSelect = $('.brxe-filter-select'); // Targets all Bricks filter select fields

  function initSelect2() {
    if (!filterSelect.hasClass("select2-hidden-accessible")) {
      filterSelect.select2({
        placeholder: 'Select an option',
        allowClear: true,
        width: '100%'
      }).on('select2:select select2:unselect', function() {
        simulateUserSelection();
      });
    }

    filterSelect.addClass('select2-hidden-accessible')
      .attr('aria-hidden', 'true')
      .css({ visibility: 'hidden', position: 'absolute' });
  }

  filterSelect.attr('data-brx-filter', 'true');

  initSelect2();

  document.addEventListener('bricks/ajax/query_result/displayed', function() {
    setTimeout(initSelect2, 100);
  });

  function simulateUserSelection() {
    const selectedValue = filterSelect.val();
    filterSelect[0].dispatchEvent(new Event('input', { bubbles: true }));
    filterSelect[0].dispatchEvent(new Event('change', { bubbles: true }));

    document.dispatchEvent(new CustomEvent('bricks/ajax/start', { detail: { queryId: 'filter_123' } }));
    document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/completed', { detail: { queryId: 'filter_123' } }));
    document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/displayed', { detail: { queryId: 'filter_123' } }));
    document.dispatchEvent(new CustomEvent('bricks/ajax/end', { detail: { queryId: 'filter_123' } }));

    filterSelect.closest('form').submit();
  }
});

Step 3: Hide the Default Select Field to Prevent Flickering

Bricks reloads the filter select after AJAX updates, which can make the default select briefly reappear. To prevent this, hide it permanently using CSS:

.brxe-filter-select {
    display: none;
}

Step 4: Targeting a Specific Select Field Instead of All Filters

If you only want to apply Select2 to a specific Bricks filter select field, you need to modify the selector in both JavaScript and CSS.

Find the ID or Class of Your Specific Select Field

Inspect the HTML source code of your filter select field in your browser’s developer tools (F12). Look for an ID or a unique class name inside the <select> tag.

For example, if your select field has the ID brxe-business-type, modify the JavaScript and CSS like this:

Updated JavaScript for a Specific Select Field

jQuery(document).ready(function($) {
    const filterSelect = $('#brxe-business-type'); // Only targets this specific filter

    function initSelect2() {
        if (!filterSelect.hasClass("select2-hidden-accessible")) {
            filterSelect.select2({
                placeholder: 'Select a business type',
                allowClear: true,
                width: '100%'
            }).on('select2:select select2:unselect', function() {
                simulateUserSelection();
            });
        }

        filterSelect.addClass('select2-hidden-accessible')
            .attr('aria-hidden', 'true')
            .css({ visibility: 'hidden', position: 'absolute' });
    }

    filterSelect.attr('data-brx-filter', 'true');

    initSelect2();

    document.addEventListener('bricks/ajax/query_result/displayed', function() {
        setTimeout(initSelect2, 100);
    });

    function simulateUserSelection() {
        const selectedValue = filterSelect.val();
        filterSelect[0].dispatchEvent(new Event('input', { bubbles: true }));
        filterSelect[0].dispatchEvent(new Event('change', { bubbles: true }));

        document.dispatchEvent(new CustomEvent('bricks/ajax/start', { detail: { queryId: 'filter_123' } }));
        document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/completed', { detail: { queryId: 'filter_123' } }));
        document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/displayed', { detail: { queryId: 'filter_123' } }));
        document.dispatchEvent(new CustomEvent('bricks/ajax/end', { detail: { queryId: 'filter_123' } }));

        filterSelect.closest('form').submit();
    }
});

Updated CSS for a Specific Select Field

Instead of hiding all select fields, only hide your specific select field:

#brxe-business-type {
    display: none;
}

Final Thoughts

By default, this guide applies Select2 to all Bricks filter select fields. However, if you want to apply Select2 to only one specific filter, use the instructions in Step 4.

This method ensures that Select2 works seamlessly with Bricks’ AJAX filtering system, maintaining full functionality while providing a modern, interactive UI.

By following these steps, you now have fully functional Select2 fields for Bricks Builder’s native AJAX filters, giving your users a better way to navigate and filter content.