jquery - select2 插件和 jquery ui 模式对话框

Question

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

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

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

任何人都可以帮忙看看如何使这个 Fiddle 工作吗？

此外，这篇 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();

Answer 1

bigwavesoftware 为 select2 4.0 提供了新版本的修复，来自 github issue thread about this problem :

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