无法在 Select2 下拉输入搜索字段中输入 (http://kevin-brown.com/select2/)

Posted 2023-05-07

【中文标题】无法在 Select2 下拉输入搜索字段中输入 (http://kevin-brown.com/select2/)

【英文标题】：Can't type in Select2 dropdown input search field (http://kevin-brown.com/select2/)

【发布时间】：2018-03-14 17:13:46

【问题描述】：

我发现列出的许多问题都提到了相同的问题，但对我没有任何帮助 (https://www.google.com/search?q=can%27t+type+in+select2&ie=utf-8&oe=utf-8&client=firefox-b-ab)。我无法使用 jQuery 在模型对话框中输入 Select2 下拉输入搜索字段。顺便说一句，我可以从下拉列表中选择值。尝试插入 tabindex: 0 但没有运气。

代码：

$.ajax(
    type: "POST",
    url: "<?php echo $myScripts; ?>",
    data:  id1: "get-release-dropdown-html", id100: "<?php echo $dbTable; ?>" ,
    success:function(releaseDropdown)

        $('#progress').hide();

        $( "#modelDialog1" ).dialog(
            modal: true,
            width: '570',
            height: '600',
            resizable: true,
            position:
            
                my: "center",
                at: "center",
                of: window,
             ,
            title: "Trigger Build",
            open: function() 

                $(this).html("<br/>Please select job options.<br/><br/><br/><b>Release:</b>" + releaseDropdown + "<div style='margin-top:30px;'/><b>Build Release Candidate:</b><select id='sReleaseCandidate'><option value='ga' selected>GA</option><option value='beta1'>BETAX</option>'></br>");

                $("#sDescription").focus();

                $("#sRelease, #sReleaseCandidate").select2(
                    tags: true
                );
            ,

            close: function() 
                $( this ).dialog( "close" );

            ,

        );

    

);

【问题讨论】：

如果您在引导模式对话框中遇到此问题，请参阅此问题***.com/q/18487056/833732

【参考方案1】：

如https://github.com/select2/select2/issues/600#issuecomment-102857595所示

您需要将模态对话框元素指定为 select2 的父元素，这将确保即使您单击了选择元素，焦点仍保留在模态中

$("#sRelease, #sReleaseCandidate").select2(
    tags: true,
    dropdownParent: $("#modelDialog1")
);

【讨论】：

动态模型呢？我有这个带有位置的单独表格，整个系统在不同的部分使用它。

对于那些遇到问题但在不同位置重用模块的人，您可以将 dropdownParent 附加到封装 select2 的 div 上，然后它在您使用它的所有位置都能正常工作，无论是在模态还是页面中。

我一年多都无法解决这个问题，真的很有用！

【参考方案2】：

如果您使用的是引导模式，那么只需从引导模式属性中删除 tabindex="-1"。就我而言，它工作得非常好。

【讨论】：

删除后应该使用Ctrl + F5，因为浏览器会缓存它。

救命！谢谢老兄！

你拯救了我的一天。谢谢老兄。

【参考方案3】：

更新后我整整一周都在与这个问题作斗争。在一种情况下有效，在另一种情况下无效，要么是放置不当，要么无法控制。而且测试也不容易……

此时，似乎最好的方法就是选择下拉菜单的真正父级...select2 可以很容易地做到这一点。

$(".select2").each((_i, e) => 
  var $e = $(e);
  $e.select2(
    tags: true,
    dropdownParent: $e.parent()
  );
)

【讨论】：

这对我有用

【参考方案4】：

我在使用react-bootstrap 时遇到了这个问题。通过将enforceFocus=false 添加到<Modal /> 元素来解决它。

【参考方案5】：

从模态属性中删除 tabindex="-1" 并添加自定义样式="width: 100%;"正确对齐