jQuery UI MultiSelect Widget 搜索过滤器在 jQuery 对话框中未获得焦点，答案

【问题标题】：jQuery UI MultiSelect Widget search filter not receiving focus when in a jQuery dialog,jQuery UI MultiSelect Widget 搜索过滤器在 jQuery 对话框中未获得焦点，
【发布时间】：2013-05-22 04:33:17
【问题描述】：

在 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。

【问题讨论】：

抱歉忘了提及我正在使用这里的多选小部件erichynds.com/blog/jquery-ui-multiselect-widget。
为什么不创建一个小提琴？ jsfiddle.net
其实没怎么想，因为我没怎么用过小提琴，会稍微创建一个来展示我的例子，感谢@Felice Pollano的建议。
嗨@Felice Pollano，这是我的小提琴网址 => jsfiddle.net/LGzFB/13。这是我第一次制作小提琴，所以请善待 LMAO。我不太确定如何将外部资源包含到我的小提琴示例中。
@TimotyKruger 您可以将脚本嵌入内联或使用 ExternalResources 并提供网址

标签： jquery jquery-ui-dialog

【解决方案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
多选 UI 小部件 1.13
MultiSelect UI 小部件过滤插件 1.5pre

【讨论】：

我可以确认 Nicola 的回答是唯一真正帮助我们解决多选问题的回答。尝试将多选附加到对话框，但没有成功。
@Nicola 当我们使用多选过滤器时，我们是否需要在任何地方保留此代码？还是我们有更好的办法？或者我们可以把这段代码放在多选插件中吗？谢谢
在工作中我们倾向于不直接修改源代码（除非严重的错误），以保持未来的兼容性。事实上，这段代码 sn-p 是为了避免库修改而编写的。我想你可以直接放在图书馆里。

【解决方案2】：

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

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

【讨论】：

感谢您做腿部工作；这在 jQuery UI 对话框中效果更好。
嗨蒂莫西..我对harvesthq.github.io/chosen控制有疑问...实际上我在一个下拉列表中有两个下拉列表我正在应用dropdowncheckboxes.codeplex.com控制..在另一个下拉列表中我想应用你建议的控制..但是你的控制不适用于dropdowncheckboxes.codeplex.com这个控制..你能帮我吗？

【解决方案3】：

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

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

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

【讨论】：

【解决方案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'));

【讨论】：