jQuery UI MultiSelect小部件搜索筛选器在jQuery对话框中未接收焦点，
在jQuery对话框中，jQuery UI MultiSelect小部件搜索过滤器没有接收焦点，这使我遇到了问题。通过在浏览器中查看以下HTML页面，可以重现我遇到的问题：jQuery UI MultiSelect小部件搜索筛选器在jQuery对话框中未接收焦点，,jquery,jquery-ui-dialog,Jquery,Jquery Ui Dialog,在jQuery对话框中，jQuery UI MultiSelect小部件搜索过滤器没有接收焦点，这使我遇到了问题。通过在浏览器中查看以下HTML页面，可以重现我遇到的问题： <!DOCTYPE html> <html> <head> <title></title> <style media="screen" title="currentStyle" type="text/css">
<!DOCTYPE html>
<html>
<head>
<title></title>
<style media="screen" title="currentStyle" type="text/css">
@import "styles/jquery.multiselect.css";
@import "styles/jquery.multiselect.filter.css";
@import "styles/assets/prettify.css";
@import "styles/jquery.ui.all.css";
@import "styles/style.css";
</style>
<script src="scripts/jquery-2.0.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="scripts/assets/prettify.js"></script>
<script src="scripts/jquery.multiselect.js"></script>
<script src="scripts/jquery.multiselect.filter.js"></script>
</head>
<body>
<input id="create-package" type="button" value="Open Dialog" />
<div id="package-dialog-form" title="Create new package">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<select multiple="multiple" style="width:370px">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="brown">Brown</option>
<option value="black">Black</option>
</select>
</fieldset>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("select").multiselect().multiselectfilter();
$( "#package-dialog-form" ).dialog({
autoOpen: false,
height: 360,
width: 740,
modal: true,
buttons: {
"Create": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#create-package" ).button().click(function() {
$( "#package-dialog-form" ).dialog( "open" );
});
});
</script>
</body>
</html>
@导入“style/jquery.multiselect.css”；
@导入“style/jquery.multiselect.filter.css”；
@导入“style/assets/prettify.css”；
@导入“style/jquery.ui.all.css”；
@导入“style/style.css”；
所有表单字段都是必需的
红色
绿色
蓝色
橙色
紫色
黄色的
棕色的
黑色
$（文档）.ready（函数（）{
$（“选择”）.multiselect（）.multiselectfilter（）；
$（“#包对话框窗体”）。对话框({
自动打开：错误，
身高：360，
宽度：740，
莫代尔：是的，
按钮：{
“创建”：函数（）{
var bValid=真；
removeClass（“ui状态错误”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（“#创建包”）。按钮（）。单击（函数（）{
$（“#包对话框窗体”）。对话框（“打开”）；
});
});
有人能帮我解决这个问题吗？这是我的问题的一个分支jqfiddle。经过大量的时间和研究，我决定放弃Eric Hynds为Selected设计的jQuery UI MultiSelect小部件——一个用于jQuery和Prototype的JavaScript插件，因为它与jQuery UI对话框一起使用时似乎更可靠。这里有一个链接，供那些也在为我上面提到的问题而挣扎并正在寻找替代方案的人使用：
我花了一段时间才弄明白，但使用MultiSleect v.1.14pre，您可以传递一个appendTo选项来解决此问题 目前，multiselect被附加到body，这意味着过滤器输入存在于对话框之外。另外，jQuery有效地禁用了活动对话框之外的输入
var dialogElement = "#myDialog";
$(dialogElement).dialog({
open: function() {
$("#myMultiSelectInput").multiselect({
appendTo : dialogElement
});
}
});
您可以将小部件移动到对话框中
$('#select').multiselect({
...
open: function () {
var menu = $(this).multiselect("widget"),
button = $(this).next(),
dialog = $('#dialog').dialog('widget');
menu.css({top: (parseInt(menu.css('top'))-parseInt(dialog.css('top'))-button.height())+'px',
left: (parseInt(menu.css('left'))-parseInt(dialog.css('left')))+'px'});
}}).multiselectfilter({
...
});
$('#select').multiselect('widget').appendTo($('#dialog'));
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('.ui-multiselect-filter input').length) return true;
return ui_dialog_interaction.apply(this, arguments);
};
}
$(element).dialog("open");
- jQueryUIV1.10.1
- MultiSelect用户界面小部件1.13
- MultiSelect UI小部件过滤器插件1.5pre