我正在使用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();
答案 0 :(得分:16)
有一个新版本的修复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的解决方案。
答案 1 :(得分:6)
我在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();
答案 2 :(得分: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
找到了这个答案 3 :(得分:1)
这是为我工作的:
$("#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;
}
});
答案 4 :(得分:0)
上述所有内容似乎都不适合我。但我在对话框初始化中更改了以下内容:
dialog = $( "#my-dialog" ).dialog({
autoOpen: false,
width: 440,
title: 'Test Dialog',
...
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
});
dialog.dialog( "open" );
基本上,我带走了&#39;模式:true&#39;参数,它的工作原理。
无论如何为我工作:)