选择2个插件和jquery ui模式对话框

我使用的是Select2插件，但是当插件与jQuery模式对话框一起使用时，内置的搜索功能不起作用。我有一把小提琴，它显示了

请注意，搜索框将不接受焦点。应该有一个关于_allowinertactionevent（）的变通方法，但它对我不起作用

有人能帮忙看看如何使这把小提琴工作吗

另外，这篇文章（）也讨论了同样的问题，但建议的修复方法对我来说不起作用

HTML

<div class="dialog">
    <select>
        <option>A tall ship was seen a</option>
        <option>A tall ship was seen b</option>
        <option>A tall ship was seen c</option>
        <option>A tall ship was seen d</option>
        <option>A tall ship was seen e</option>
        <option>A tall ship was seen f</option>
    </select>
</div>

---

我在上找到的一些代码的添加似乎解决了这个问题。更新小提琴

JAVASCRIPT

$('.dialog').dialog({
    modal: true,
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});
$('select').select2();

$('.dialog').dialog({
    modal: true,
    open: function () {
        if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
            if ($.ui.dialog.prototype._allowInteraction) {
                $.ui.dialog.prototype._allowInteraction = function (e) {
                    if ($(e.target).closest('.select2-drop').length) return true;
                    return ui_dialog_interaction.apply(this, arguments);
                };
                $.ui.dialog.prototype._allowInteractionRemapped = true;
            }
            else {
                $.error("You must upgrade jQuery UI or else.");
            }
        }
    },
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});
$('select').select2();

---

我通过将此代码添加到JS解决了这个问题

$.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};

---

我在这里找到了这个

有一个新版本的fix BigWave软件，用于从以下位置选择2 4.0：

这只需要在创建任何包含select2的模式对话框之前运行；您不需要在对话框选项内执行任何特殊操作，如在bigwavesoftware的解决方案中

---

以上这些似乎都不适合我。但是，我在对话框初始化中更改了以下内容：

dialog = $( "#my-dialog" ).dialog({
                autoOpen: false,
                width: 440,
                title: 'Test Dialog',
                ...
         });

form = dialog.find( "form" ).on( "submit", function( event ) {
    event.preventDefault();
});

dialog.dialog( "open" );

基本上，我去掉了'modal:true'参数，它就工作了

反正对我有用：）

这对我有用：

$("#modal").dialog({
    closeOnEscape: false,   
    resizable: false,
    height: 180,
    maxHeight: 180,
    width: 700,
    maxWidth: 700,
    modal: true,
    autoOpen: false,
    fluid: true,
    open: function () {
        if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
            if ($.ui.dialog.prototype._allowInteraction) {
                $.ui.dialog.prototype._allowInteraction = function (e) {
                    if ($(e.target).closest('.select2-drop').length) return true;

                    if (typeof ui_dialog_interaction!="undefined") {
                        return ui_dialog_interaction.apply(this, arguments);
                    } else {
                        return true;
                    }
                };
                $.ui.dialog.prototype._allowInteractionRemapped = true;
            }
            else {
                $.error("You must upgrade jQuery UI or else.");
            }
        }
    },
    _allowInteraction: function (event) {
        return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
    }
});

---

我的代码有一个错误：“ReferenceError:ui\u dialog\u交互未定义”您的小提琴抛出了相同的异常<代码>ui\u对话框\u交互未定义我尝试了此操作，但得到了相同的错误。不确定为什么这被标记为正确答案。它看起来确实是legitI在我的

$（'.dialog'）.dialog（{

）中添加的。它将光标更改为搜索字段上的文本栏，但仍然无法键入文本。这对我很有效。我将它放在我的

$（“#dialog edit”）.dialog（{

代码）之前

$("#modal").dialog({
    closeOnEscape: false,   
    resizable: false,
    height: 180,
    maxHeight: 180,
    width: 700,
    maxWidth: 700,
    modal: true,
    autoOpen: false,
    fluid: true,
    open: function () {
        if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
            if ($.ui.dialog.prototype._allowInteraction) {
                $.ui.dialog.prototype._allowInteraction = function (e) {
                    if ($(e.target).closest('.select2-drop').length) return true;

                    if (typeof ui_dialog_interaction!="undefined") {
                        return ui_dialog_interaction.apply(this, arguments);
                    } else {
                        return true;
                    }
                };
                $.ui.dialog.prototype._allowInteractionRemapped = true;
            }
            else {
                $.error("You must upgrade jQuery UI or else.");
            }
        }
    },
    _allowInteraction: function (event) {
        return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
    }
});