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

【问题标题】：Using BGIFRAME in IE6 with YUI Autocomplete在带有 YUI 自动完成功能的 IE6 中使用 BGIFRAME
【发布时间】：2011-04-13 13:30:33
【问题描述】：

我正在编写一个简单的 HTML 代码，它使用 YUI 自动完成功能（像 Google 一样在您键入时显示建议）。但是<select> 块只会显示在 IE6 中的建议列表上。

它在其他浏览器中运行良好。

我使用bgiframe 来避免它，因为z-index bug in IE6 但没有运气。

我的简单代码在这里：

<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>

这里 select 显示在 myContainer 上（myContainer 显示填充的建议）。我知道我犯了一些错误。请帮我弄清楚。

【问题讨论】：

标签： html css internet-explorer-6 yui bgiframe

【解决方案1】：

您可以做的一件事是在流程开始时隐藏<select>（使用visibility:hidden以免弄乱布局）并在结束时显示。

顺便说一句：使用 YUI + jQuery + bgiframe + ie6 找到另一个 StackOverflow 用户的可能性非常低。大多数用户喜欢帮助调试代码，而不是插件。

【讨论】：

感谢狄奥迪斯。我不想隐藏它，这就是我使用 bgiframe 的原因。我知道概率很低，但我仍然很乐观，因为这让我很生气，而且截止日期真的很近。

【解决方案2】：

jQuery 和 YUI 存在于不同的命名空间中，所以理论上应该没有问题。您确定没有 JavaScript 错误吗？所有的库都正确加载了吗？

可以改用jQuery autocomplete吗？

编辑：您可以配置YUI autocomplete to use an iFrame!它的工作原理是它确实隐藏了<select>，但不是立即隐藏。这可能是最好的解决方案，因为它不需要 jQuery 或 bgiframe。

编辑 2： 我对 YUI 创建 <iframe> 的速度不满意，所以想出了这个 hack！这是一个对我来说似乎适用于 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>

【讨论】：

我现在不能使用 jquery :( 我检查并认为没有任何脚本错误/冲突。
嗯，你正在使用 jQuery 作为“bgiframe”，这就是我问的原因:-) 我已经用一些可行的方法更新了我的答案，尽管它可能不是最好的用户体验。
嘿，看来我是在这个上缝了自己，因为当我回答你的other question时，首先是我推荐了bgiframe！