我正在使用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的解决方案那样在对话框选项中做任何特殊的事情.
