在IE6中通过YUI自动完成使用BGIFRAME
在IE6中通过YUI自动完成使用BGIFRAME
提问于 2011-04-13 21:30:33
我正在写一个简单的HTML代码，其中使用YUI自动完成(以显示建议，因为你键入像谷歌)。但仅在IE6中，建议列表上方会显示一个<select>块。
它在其他浏览器中工作得很好。
由于z-index bug in IE6的缘故，我使用了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显示填充的建议)。我知道我犯了一些错误。请帮我弄清楚。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-04-14 04:04:38
jQuery和YUI位于不同的名称空间中，所以理论上应该不会有问题。您确定没有JavaScript错误吗？是否所有的库都正确加载了？
可以改用jQuery autocomplete吗？
编辑：您可以配置YUI autocomplete to use an iFrame！它的工作原理是，它确实隐藏了<select>，但不是立即隐藏。这可能是最好的解决方案，因为它不需要jQuery或bgiframe。
编辑2:我对YUI创建<iframe>的速度不满意，所以想出了这个办法！这是一个完整的解决方案，似乎可以在IE6中为我工作。THe的问题是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>Stack Overflow用户
发布于 2011-04-13 21:46:57
您可以做的一件事是在过程开始时隐藏<select> (使用visibility:hidden as以避免弄乱布局)，并在结束时显示它。
顺便说一句:使用YUI + jQuery + bgiframe + ie6找到另一个StackOverflow用户的可能性非常低。大多数用户喜欢帮助调试代码，而不是插件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5650079
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号