Question

我遇到了jQuery UI MultiSelect小部件搜索过滤器在jQuery对话框中没有获得焦点的问题。通过在浏览器中查看以下HTML页面，可以重现我遇到的问题：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style media="screen" title="currentStyle" type="text/css">
            @import "styles/jquery.multiselect.css";
            @import "styles/jquery.multiselect.filter.css";
            @import "styles/assets/prettify.css";
            @import "styles/jquery.ui.all.css";
            @import "styles/style.css";
        </style>
        <script src="scripts/jquery-2.0.0.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script src="scripts/assets/prettify.js"></script>
        <script src="scripts/jquery.multiselect.js"></script>
        <script src="scripts/jquery.multiselect.filter.js"></script>
    </head>
    <body>
        <input id="create-package" type="button" value="Open Dialog" />
        <div id="package-dialog-form" title="Create new package">
            <p class="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                    <select multiple="multiple" style="width:370px">
                        <option value="red">Red</option>
                        <option value="green">Green</option>
                        <option value="blue">Blue</option>
                        <option value="orange">Orange</option>
                        <option value="purple">Purple</option>
                        <option value="yellow">Yellow</option>
                        <option value="brown">Brown</option>
                        <option value="black">Black</option>
                    </select>
                </fieldset>
            </form>
        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                $("select").multiselect().multiselectfilter();

                $( "#package-dialog-form" ).dialog({
                    autoOpen: false,
                    height: 360,
                    width: 740,
                    modal: true,
                    buttons: {
                        "Create": function() {
                            var bValid = true;
                            allFields.removeClass( "ui-state-error" );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

                $( "#create-package" ).button().click(function() {
                    $( "#package-dialog-form" ).dialog( "open" );
                });
            });
        </script>
    </body>
</html>

任何人都可以帮我解决这个问题吗？这是我的问题http://jsfiddle.net/tim_kruger/7ubdE/的分叉jqfiddle。

Answer 1

简单地说这句话：

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
            var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
            $.ui.dialog.prototype._allowInteraction = function(e) {
                if ($(e.target).closest('.ui-multiselect-filter input').length) return true;
                return ui_dialog_interaction.apply(this, arguments);
            }; 
        }

之后

$(element).dialog("open");

（如果使用autoOpen：true，则在创建对话框后）。

经过测试：

Jquery UI v1.10.1
MultiSelect UI Widget 1.13
MultiSelect UI窗口小部件过滤器插件1.5pre

Answer 2

经过大量的时间和研究后，我决定放弃由Eric Hynds for Chosen提供的jQuery UI MultiSelect Widget - 一个jQuery和Prototype的JavaScript插件，因为当与jQuery UI对话框一起使用时，这似乎更加可靠。这是一个链接，任何人也在努力解决我上面提到的问题，并且正在寻找替代方案：

http://harvesthq.github.io/chosen/

Answer 3

我花了一些时间来弄明白，但是使用multislelect v.1.14pre你可以传递一个appendTo选项来解决这个问题。

按原样，多重选择附加到主体，这意味着过滤器输入存在于对话框之外。 AFAIK，jQuery有效地禁用了活动对话框之外的输入。

var dialogElement = "#myDialog";
$(dialogElement).dialog({
  open: function() {
      $("#myMultiSelectInput").multiselect({
              appendTo : dialogElement
      });
  }
});

Answer 4

您可以将窗口小部件移动到对话框中。

$('#select').multiselect({
        ...
        open: function () {
            var menu = $(this).multiselect("widget"),
                button = $(this).next(),
                dialog = $('#dialog').dialog('widget');

            menu.css({top: (parseInt(menu.css('top'))-parseInt(dialog.css('top'))-button.height())+'px',
                      left: (parseInt(menu.css('left'))-parseInt(dialog.css('left')))+'px'});
        }}).multiselectfilter({
            ...
        });

    $('#select').multiselect('widget').appendTo($('#dialog'));

jQuery UI MultiSelect Widget搜索过滤器在jQuery对话框中没有获得焦点，

4 个答案: