在BootstrapDialog中，Select2搜索框无法获得焦点

Question

我是这样创建Select2的：

function SetSelect(obj, placeholder, url) {
    obj.select2({
        placeholder: placeholder,
        theme: "bootstrap",
        language: "es",
        ajax: {
            url: url,
            dataType: "json",
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;
                return {
                    results: data
                };
            }
        },
    });
}

Select2放置在模式对话框（BootstrapDialog）中。问题是选择中显示的搜索输入框无法获得焦点。我读过其他有相同问题的人，但是他们的解决方案对我不起作用（例如，尝试更改z-index）。这是Select2中的错误吗？我该如何解决？

Answer 1

Bootstrap模态使用tabindex =“-1” html属性强制对其进行关注。

您可以从模式元素中删除此属性，并且该属性应使select2搜索框可聚焦。

但这可能会导致某些模态预期行为出现问题，因为添加此属性是出于某种原因（它可能无法按预期保留制表符，或者不允许在esc键上关闭对话框等）

因此，更好的方法是使用select2的“ dropdownParent”属性，而不需要删除tabindex（从此处获取）

$("#mySelect").select2({
    dropdownParent: $('#myModal')
});

另请参见工作示例