use*_*531 12 css jquery jquery-ui jquery-ui-dialog jquery-ui-autocomplete
我有一个jQueryUI自动完成,驻留在一个对话框中.对于某些旧版本的jQuery/jQueryUI,它显示返回值列表,而对于最新版本则不显示.此外,我已经在一个页面上正常工作,即使使用新版本的jQuery/jQueryUI,其他一些东西仍在进行,这似乎并不好看.显然,我有一些不同的东西,但我似乎无法确定它是什么.我知道我可以使用css来改变z-index,但这看起来几乎有点hackish.
请参阅以下两个实例.
http://jsbin.com/uciriq/3/(使用jQuery 1.4.3和jQueryUI 1.8.4)
http://jsbin.com/uciriq/2/(使用jQuery 1.9.1和jQueryUI 1.10.3)
如图所示(或更适用的声明"未见"),jQuery 1.9.1/jQueryUI 1.10.3的返回自动完成匹配显示在对话框后面.
允许返回的自动完成匹配可见的最佳解决方案是什么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>autocomplete with dialog</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<!--
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js" type="text/javascript"></script>
-->
<script type="text/javascript">
$(function() {
$( "#search" ).autocomplete({
source: [ "one", "two", "three" ]
});
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" class="dialog" title="Testing">
<div class="ui-widget">
<label for="search">one, two, three: </label>
<input id="search" />
</div>
</div>
</body>
</html>
编辑 我相信http://jqueryui.com/upgrade-guide/1.10/所描述的对jQueryUI Dialog的更改以及下面重复的是我的问题的原因.我不确定如何最好地应用它们,并且会感激任何建议.
添加了appendTo选项(#7948)以前,对话框始终附加到正文以确保它们是DOM中的最后一个元素,以避免与其他堆叠上下文冲突.但是,为了提供更大的灵活性并简化堆叠逻辑,添加了一个默认为正文的appendTo选项.有关更多信息,请查看API文档.
删除堆栈选项(#8722)对话框以前支持堆栈选项,该选项确定对话框在聚焦时是否应移至顶部.由于情况总是这样,因此已经删除了opiton.
删除了zIndex选项(#8729)与堆栈选项类似,zIndex选项对于正确的堆叠实现是不必要的.z-index在CSS中定义,现在通过确保聚焦对话框是其父级中的最后一个"堆叠"元素来控制堆叠.
key*_*eom 25
更改代码以首先创建对话框,然后进行自动完成.例如
$(function()
{
$("#dialog").dialog();
$( "#search" ).autocomplete({
source: [ "one", "two", "three" ]
});
});
然后它应该正常工作,允许您查看自动完成的结果.
另一个hackans的答案.使用CSS而不是jQuery来修改问题子.
.ui-autocomplete {z-index:1000}
http://jsbin.com/uciriq/6/edit