1

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

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

由于IE6 中的 z-index 错误，我使用bgiframe来避免它，但没有运气。

我的简单代码在这里：

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

4

2 回答 2

2

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

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

于 2011-04-13T13:46:57.070 回答
1

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

可以改用jQuery自动完成吗？

编辑：您可以配置YUI 自动完成以使用 iFrame！它的工作原理是它确实隐藏了<select>但不是立即隐藏。这可能是最好的解决方案，因为它不需要 jQuery 或bgiframe。

编辑 2：我对 YUI 创建的速度不满意，<iframe>所以想出了这个 hack！这是一个对我来说似乎适用于 IE6 的完整解决方案。问题是 YUI 控制着#myContainer似乎破坏了bgiframejQuery 设置的东西。#myContainer所以我选择简单地使用 YUI 方法挂钩来操作高度。您可能需要更改此值以适合您的布局，但我希望它对您有用。

抱歉，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>
于 2011-04-13T20:04:37.607 回答