在 IE6 中使用 BGIFRAME 和 YUI 自动完成

发布于 2024-11-01 04:56:42 字数 2285 浏览 1 评论 0原文

我正在编写一个简单的 HTML 代码，它使用 YUI 自动完成（在您像 Google 一样键入时显示建议）。但

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

我使用 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 显示填充的建议）。我知道我犯了一些错误。请帮我弄清楚。

原文

I am writing a simple HTML code which uses YUI autocomplete (to display suggestion as you type like Google). But a <select> block is getting displayed over the suggestions list in IE6 only.

It is working fine in other browsers.

I used bgiframe to avoid it because of z-index bug in IE6 but had no luck.

My simple code is here:

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

Here select is displayed over myContainer (myContainer displays populated suggestions).
I know I am making some blunder.
Please help me to figure it out.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我一直都在从未离去 2024-11-08 04:56:42

您可以做的一件事是在流程开始时隐藏

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

回复收藏 0 原文

眼波传意 2024-11-08 04:56:42

jQuery 和 YUI 位于不同的命名空间中，因此理论上应该不会有问题。你确定没有 JavaScript 错误吗？所有库都正确加载吗？

可以使用 jQuery 自动完成代替吗？

编辑：您可以配置YUI 自动完成以使用 iFrame！它的工作原理是它确实隐藏

编辑 2： 我对 YUI 创建的速度不满意，所以想出了这个 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 and YUI live in separate namespaces so there shouldn't theoretically be a problem. Are you sure there are no JavaScript errors? Are all the libraries loaded correctly?

Could use jQuery autocomplete instead?

Edit: You can configure the YUI autocomplete to use an iFrame! It kind of works in that it does hide the <select> but not instantly. This is probably the best solution since it does not needs jQuery or bgiframe.

Edit 2: I was not happy with the speed at which the <iframe> was created by YUI so came up with this hack! Here is a complete solution that seems to work in IE6 for me. THe problem is that YUI is in control of the #myContainer which seems to break the bgiframe that jQuery sets up. So I opted to simply manipulate the height of #myContainer with the YUI method hooks. You may need to change this value to fit your layout, but I'm hoping it will work for you.

Sorry the CSS alteration is jQuery. I have never used YUI before and haven't got any idea how to change CSS properties in YUI :-)

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

回复收藏 0 原文

~没有更多了~