How to get Select2 searchable dropdown to work inside a modal

I need a searchable dropdown inside my modal.

$('#addEditModalSecondary').on('show.bs.modal', function (event) {
    $(document).ready(function() {
        $('.search_dropdown').select2();
    });
});

 <select name="client_id" class="form-control bg-light search_dropdown">
                        <option value="0" selected></option>
                        <?php select_client() ?>
                    </select>

This adds a second search box underneath, but you can't type in it.

I tried this:

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

Can anyone help?

Daniel1836

4 years ago

Level 6

Edit: I'm close to solving it. With this code:

$('#addEditModalSecondary').on('show.bs.modal', function (event) {
    $(document).ready(function() {
        $('.search_dropdown').select2({
            dropdownParent: $('#addEditModalSecondary')
        });
    });
});

The search functionality works but it is positioned incorrectly. I don't know if my dropdown parent target is on the right spot.

This is what the documentation says about this issue.

https://select2.org/troubleshooting/common-problems

Please or to participate in this conversation.