select2 插件和 jquery ui 模式对话框

Posted 2023-05-07

【中文标题】select2 插件和 jquery ui 模式对话框

【英文标题】：select2 plugin and jquery ui modal dialogs

【发布时间】：2013-11-16 06:25:16

【问题描述】：

我正在使用 Select2 插件，但是当插件与 jQuery 模态对话框一起使用时，内置的搜索功能不起作用。我有一个显示问题的小提琴......

http://jsfiddle.net/jeljeljel/s3AFx/

请注意，搜索框不会接受焦点。 _allowInteraction 事件 (http://api.jqueryui.com/dialog/#method-_allowInteraction) 应该有一个解决方法，但它对我不起作用。

谁能帮忙看看如何使这个小提琴工作？

此外，这篇 SO 帖子 (select2 plugin works fine when not inside a jquery modal dialog) 讨论了相同的问题，但建议的修复对我不起作用。

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();

【参考方案1】：

bigwavesoftware 为 github issue thread about this problem 中的 select2 4.0 提供了一个新版本的修复：

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('.select2-dropdown').length) return true;
        return ui_dialog_interaction.apply(this, arguments);
    ;

这只需要在创建任何包含 select2 的模式对话框之前运行；您不需要像 bigwavesoftware 的解决方案那样在对话框选项中做任何特别的事情。

JSFiddle of this fix in action

【讨论】：

这对我有用。我把它放在我的$("#dialog-edit").dialog( 代码之前

【参考方案2】：

我在https://github.com/ivaynberg/select2/issues/1246 找到的一些代码的添加似乎已经解决了这个问题。更新了小提琴...

http://jsfiddle.net/jeljeljel/s3AFx/4/

JAVASCRIPT

$('.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();

【讨论】：

这段代码有一个错误：'ReferenceError: ui_dialog_interaction is not defined'

你的小提琴抛出了同样的异常。 ui_dialog_interaction is not defined

我试过这个并且得到了同样的错误。不知道为什么这被标记为正确答案。它看起来确实合法

【参考方案3】：

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

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

我在这里找到了这个https://github.com/ivaynberg/select2/issues/1246#issuecomment-17428249

【讨论】：

我在我的$('.dialog').dialog( 中添加了这个。它将光标更改为搜索字段上方的文本栏，但仍然无法输入文本

【参考方案4】：

这对我有用：

$("#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;
    
);

【参考方案5】：

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

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' 参数并且它起作用了。

无论如何都为我工作:)