2

在 jQuery 对话框中，我遇到了 jQuery UI MultiSelect 小部件搜索过滤器没有获得焦点的问题。我遇到的问题可以通过在浏览器中查看以下 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 。

4

4 回答 4

7

简单地说：

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
  • 多选 UI 小部件 1.13
  • MultiSelect UI Widget Filter Plugin 1.5pre
于 2014-07-15T15:54:12.070 回答
3

经过大量时间和研究后，我决定放弃 Eric Hynds 的 jQuery UI MultiSelect Widget for Chosen - 一个用于 jQuery 和 Prototype 的 JavaScript 插件，因为它在与 jQuery UI 对话框一起使用时似乎更加可靠。这是一个链接，适用于那些也在为我上面提到的内容而苦苦挣扎并正在寻找替代方案的人：

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

于 2013-05-29T15:29:30.817 回答
1

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

就目前而言，多选附加到正文，这意味着过滤器输入存在于对话框之外。AFAIK，jQuery 有效地禁用了活动对话框之外的输入。

var dialogElement = "#myDialog";
$(dialogElement).dialog({
  open: function() {
      $("#myMultiSelectInput").multiselect({
              appendTo : dialogElement
      });
  }
});
于 2014-01-23T18:34:26.863 回答
1

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

$('#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'));
于 2014-04-02T06:45:56.423 回答