在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用户的可能性非常低。大多数用户喜欢帮助调试代码,而不是插件。     

要回复问题请先登录注册