select2插件和jquery ui模态对话框

问题描述

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

I am using the Select2 plugin, but the built in search functionality doesn't work when the plugin is used with a jQuery modal dialog. I have a fiddle that shows the problem at...

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

请注意，搜索"框将不接受焦点.可能存在_allowInteraction事件的解决方法( http://api.jqueryui.com /dialog/#method-_allowInteraction )，但它对我不起作用.

Notice the Search box will not accept the focus. There is supposed to be a workaround with the _allowInteraction event (http://api.jqueryui.com/dialog/#method-_allowInteraction), but it isn't working for me.

有人可以帮忙看看如何使这个小提琴发挥作用吗?

Can anyone help to see how to make this Fiddle work?

此SO帖子( select2插件不在jquery模态对话框中时可以正常工作)讨论了相同的问题，但是建议的修复程序对我不起作用.

Also, this SO post (select2 plugin works fine when not inside a jquery modal dialog) discusses the same issue, but the suggested fixes are not working for me.

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

推荐答案

在 https://github.com/ivaynberg/select2/issues/1246 似乎已解决了该问题.更新了小提琴...

The addition of some code I found at https://github.com/ivaynberg/select2/issues/1246 seems to have fixed the problem. Updated fiddle...

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

这篇关于select2插件和jquery ui模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！