在IE6中使用带有YUI自动完成功能的BGIFRAME

问题描述

|| 我正在编写一个简单的HTML代码，该代码使用YUI自动完成功能（在您输入类似Google时显示建议）。但是，仅在IE6中的建议列表上显示“ 0”块。在其他浏览器中运行正常。我使用bgiframe来避免这种情况，因为IE6中存在z-index错误，但是没有运气。我的简单代码在这里：

<script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js\"></script>
<script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js\"></script>
<script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js\"></script>
<script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js\"></script>
<script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js\"></script>

<script type=\"text/javascript\" src=\"js/jquery-1.3.2.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.bgiframe.js\"></script>

<script type=\"text/javascript\" charset=\"utf-8\">
    $(function() {
        $(\'#myContainer\').bgiframe();
    });
</script>

<style type=\"text/css\">
    #myAutoComplete {
        width:25em; /* set width here or else widget will expand to fit its container */
        padding-bottom:2em;
    }
</style>
</head>
<body>
    <h1>Autocomplete using YUI !</h1>
    <label for=\"myInput\">Search names in our database:</label>
    <div id=\"myAutoComplete\" class=\"yui-skin-sam\">
        <input id=\"myInput\" type=\"text\">
        <div id=\"myContainer\"></div>
    </div>
    <br>
    <div>   
        <form action=\"#\" method=\"get\" accept-charset=\"utf-8\">
            <select>
                <option value=\"val1\">val1</option>
                <option value=\"val2\">val2</option>
            </select>
        </form>
    </div>
</body>

此处，选择显示在myContainer上方（myContainer显示填充的建议）。我知道我在犯一些错误。请帮我弄清楚。

解决方法

jQuery和YUI位于单独的命名空间中，因此从理论上讲应该没有问题。您确定没有JavaScript错误吗？是否正确加载了所有库？可以改用jQuery自动完成功能吗？编辑：您可以配置YUI自动完成功能以使用iFrame！它的工作方式是隐藏<select>，但不是立即隐藏。这可能是最好的解决方案，因为它不需要jQuery或bgiframe。编辑2：我对YUI创建<iframe>的速度不满意，于是想出了这个办法！这是一个完整的解决方案，对我来说似乎可以在IE6中使用。问题在于，YUI控制着#myContainer，这似乎破坏了jQuery设置的bgiframe。因此，我选择使用YUI方法挂钩简单地操纵#myContainer的高度。您可能需要更改此值以适合您的布局，但是我希望它对您有用。抱歉，CSS更改是jQuery。我以前从未使用过YUI，也没有任何想法如何在YUI中更改CSS属性：-)

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
        \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
    <title>Title</title>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
    <style type=\"text/css\">
        #myAutoComplete {
            width:15em; /* set width here or else widget will expand to fit its container */
            padding-bottom:2em;
        }
    </style>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css\" />
    <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js\"></script>
    <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js\"></script>
    <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js\"></script>
    <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js\"></script>
    <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js\"></script>
    <script type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script>
    <script type=\"text/javascript\" src=\"jquery.bgiframe.min.js\"></script>
</head>
<body class=\"yui-skin-sam\">
    <div id=\"myAutoComplete\">
        <label for=\"myInput\">Enter a state:</label><br/>
        <input id=\"myInput\" type=\"text\"/>
        <div id=\"myContainer\"></div>
    </div>
    <div>
        <form action=\"#\" method=\"get\" accept-charset=\"utf-8\">
            <p>
                <select>
                    <option value=\"val1\">val1</option>
                    <option value=\"val2\">val2</option>
                </select>
            </p>
        </form>
    </div>
    <script type=\"text/javascript\">
        $(function() {
            $(\'#myContainer\').bgiframe();
        });

        YAHOO.example.Data = {
            arrayStates: [
                \'Alabama\',\'Alaska\',\'Arizona\',\'Arkansas\',\'New Hampshire\',\'New Jersey\',\'New Mexico\',\'New York\',\'Wyoming\'
            ]
        }

        YAHOO.example.BasicLocal = function() {
            var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
            var restoreHeight = function(sType,aArgs) {
                $(\'#myContainer\').css({height:\'auto\'});
            };

            // Instantiate the AutoComplete
            var oAC = new YAHOO.widget.AutoComplete(\"myInput\",\"myContainer\",oDS);
            oAC.prehighlightClassName = \"yui-ac-prehighlight\";
         //   oAC.useIFrame = true; // works but changes the container into an iFrame a bit too late for my liking
            oAC.doBeforeExpandContainer = function () {
                $(\'#myContainer\').css({height:\'50px\'}); // might need to play around with this value
                return true;
            }
            // restore height
            oAC.containerCollapseEvent.subscribe(restoreHeight);
            oAC.useShadow = true;

            return {
                oDS: oDS,oAC: oAC
            };
        }();
    </script>
</body>
</html>

,您可以做的一件事是在过程开始时隐藏<select>（使用visibility:hidden以免弄乱布局），并在结束时显示它。顺便说一句：使用YUI + jQuery + bgiframe + ie6查找另一个StackOverflow用户的可能性非常低。大多数用户喜欢帮助调试代码，而不是插件。

bgiframe ie6 使用使用使用功能功能完成完成自动

在IE6中使用带有YUI自动完成功能的BGIFRAME

问题描述

解决方法

相关问答