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

Question

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

我发现许多问题都提到了同样的问题，但对我都没有用 (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" );

            },

        });

    }

});

- Jitesh Sojitra

---

如果您在Bootstrap模态对话框中遇到此问题，请参考此问题https://dev59.com/H2Ml5IYBdhLWcg3wV1wE。 - wencha

Answer 1

如果你正在使用Bootstrap Modal，只需从Bootstrap模态框属性中删除tabindex="-1"即可。在我的情况下，它非常好用。

- Dev Rathi

---

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

救命稻草！谢谢老兄！ - Aldee

你救了我的一天。谢谢，伙计。 - Viet Nguyen

如果没有你的答案，我可能要搜索整整一天。 - Julien G

是的，先生，这对我有效，而不是“dropdownParent”设置。 - lisandro

太棒了，谢谢！ - Hoang Son

Answer 2

根据 https://github.com/select2/select2/issues/600#issuecomment-102857595 所示， 你需要将模态对话框元素指定为 select2 的父级，这将确保焦点仍然在模态对话框上，即使你已经单击了 select 元素。

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

- Saket Patel

---

动态模型怎么样？我有一个带有位置信息的分离表单，整个系统在不同的部分使用它。 - Marcelo Agimóvel

对于那些遇到问题，但需要在不同位置重用模块的用户，您可以将下拉菜单的定位关联到包含 select2 的 div 上，这样它就可以在所有位置正常工作，无论是在模态框还是页面上。 - KimvdLinde

我已经一年多无法解决这个问题，真的很有用！ - Sruit A.Suk

Answer 3

在更新后的整个星期里，我一直在与这个问题斗争。有些情况下有效的方法，在其他情况下却无法正确使用或控制。而且测试也不容易...

目前看来，最好的解决方法就是选择下拉菜单的真正父级... 这是select2可以很容易完成的。

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

- estani

Answer 4

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

- Habeeb Rahman

Answer 5

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

- John Muraguri