Question

我正在编写一个简单的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显示已填充的建议）。我知道我犯了一些错误。请帮我解决一下。

Answer 1

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

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

Answer 2

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

可以改用jQuery autocomplete吗？

修改：您可以配置YUI autocomplete to use an 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>

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

2 个答案: