Question

我一直在使用select2插件一段时间，直到现在它已经完美了。

我有一个包含3个选择的页面正在加载数据并且运行良好，并且弹出内部有多个选择。它们看起来很好但你不能在搜索字段上写。在主页面搜索工作正常，所以我无法弄清楚问题是什么..

我正在使用弹出窗口的blockUI插件。我尝试了z-index，在blockUI函数的回调中销毁并启动插件，但没有任何工作，我不知道为什么。

代码：

<!doctype html>
<html>
<head>
<title>ff</title>
<link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.2/select2.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/select2/3.2/select2.js">    </script>
<script type="text/javascript" src="http://xiao3meng.googlecode.com/files/jquery.blockUI.js"></script>
<script>
    $(document).ready(function() {
        $(".startselect").select2();

        $('#clickstartpopup').click(function() { 
            $.blockUI({ 
                message: $('#popblock'),
                onBlock: function() { 
                    $(".popupselect").select2();

                }
            });
        });

    });
</script>
</head>
<body>
<div id="maincontent1" class="maincontent mywebsitepage">
  <select  class="startselect" id="merchantList">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>
</div>
<div style="clear: both; height: 15px;"></div>
<span id="clickstartpopup" style="cursor: pointer;color:red;" >click me!</span>
<div style="height: 300px;background-color: red;display:none;" id="popblock" >
<select class="popupselect">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>
</div>
</body>
</html>

有什么建议吗？

Answer 1

这里的问题相同。我在工具提示（qtip2）中加载select2，该工具提示在单击jquery.fullCalendar中包含的事件时打开。 fullCalendar本身显示在div中，用作覆盖我的应用程序的blockUI消息。

本地，select的搜索字段无法正常工作。使用jquery blockUI版本2.57.0（17.02.2013）我可以通过阻止后台应用程序中的元素并立即解除阻塞来使select2的搜索字段按预期工作：

$("#someDivInTheBg").block();
$("#someDivInTheBg").unblock();

奇怪的是，该解决方法不再适用于jquery BlockUI版本2.64.0（18.07.13）。我无法弄清楚发生了什么，我可以找到如何跟踪问题，除了它显然是在blockUI / select2交互中。

请注意，有时候，当我尝试在显示后立即使用select2搜索字段时，我输入的第一个字符会在锁定之前显示在搜索字段中。由于在打开qtip时没有加载blockUI，因此select2代码可能会触发此问题。

另请注意，位于后台应用程序中的另一个select2（不在blockUI消息内）不会出现此问题

我将尝试在blockUI中报告问题并选择2 githubs

*已编辑：解决方案* 嗯，问题很简单。

Select2分为两部分： - select2-container紧挨着原始select（或处理动态加载数据时的隐藏输入） - select2-drop放在tag之前（注意这个元素是唯一的，当你打开它时用于你的每个select2）输入字段.select2-input，select2-drop的子项。

默认情况下，BlockUI会禁用不在其消息中的元素的键和鼠标事件，就像文档中的创建者malsup所说：

//如果要为被阻止的内容禁用密钥和鼠标事件，请启用 bindEvents：true，

因此，当您在位于blockUI消息内的字段上初始化select2时，除了在input.select2-input字段中禁用了key和mouse事件之外，一切都没有问题，该字段不在blockUI消息内，而是在接近结束时的方式之外你的文件html ......

解决方案就像这样简单：使用选项：

初始化您的blockUI

bindEvents: false,

请注意那些可以保留或将焦点置于blockUI元素之外的元素，因为鼠标和键事件不会被中和。

也许可以找到针对blockUI中的select2架构的一点改进，使其更加清晰。

select2搜索无法正常工作

1 个答案: