jQuery-UI自动完成不会显示在jQuery-UI对话框中

我有一个jQueryUI自动完成,驻留在一个对话框中.对于一些较旧版本的jQuery / jQueryUI,它会显示返回值的列表,而不是最新版本.而且,即使是新版本的jQuery / jQueryUI,我也可以在一个页面上正常工作,其中一些其他的东西,甚至不会很好玩.显然,我有一些事情是不同的,但我似乎不能确定它是什么.我明白我可以使用css来改变z-index,但这似乎有点黑客.

请参阅以下两个实例.

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对话框的更改和下面的重复是我的问题的原因.我真的不知道如何最好地应用它们,并会感谢任何建议.

添加了appendTo选项(#7948)以前,对话框一直被附加到正文中,以确保它们是DOM中的最后一个元素,以避免与其他堆叠上下文冲突.然而,为了允许更多的灵活性和简化堆叠逻辑,添加了一个默认为body的appendTo选项.查看API文档了解更多信息.

已删除堆栈选项(#8722)以前支持的对话框堆栈选项,该选项确定对话框应在何时移动到顶部.因为这应该是这样,所以opiton已被删除.

已删除的zIndex选项(#8729)与堆栈选项类似,zIndex选项不需要正确的堆栈实现. z-index在CSS中定义,现在通过确保聚焦的对话框是其父项中的最后一个“堆叠”元素来控制堆叠.

解决方法

首先改变代码来创建对话框,然后进行自动完成.例如

$(function()
{
  $("#dialog").dialog();
  $( "#search" ).autocomplete({
    source: [ "one","three" ]
    });
});

它应该正常工作,让您看到自动完成的结果.

jQuery-UI自动完成不会显示在jQuery-UI对话框中

解决方法

猜你在找的jQuery相关文章