select2插件和jquery ui模式对话框

我正在使用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();

解决方法

有一个新版本的修复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

原文地址：https://www.jb51.cc/jquery/179079.html