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

我正在寫一個簡單的HTML代碼，它使用YUI自動完成（在您輸入Google時顯示建議）。但是<select>塊僅在IE6中的建議列表上顯示。在IE6中使用BGIFRAME和YUI自動完成

它在其他瀏覽器中工作正常。

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

在這裏選擇顯示在myContainer中（myContainer中顯示填充的建議）。我知道我犯了一些錯誤。請幫我弄明白。

來源

2011-04-13 xyz

jQuery和YUI存在於不同的命名空間中，所以理論上應該不存在問題。你確定沒有JavaScript錯誤嗎？所有的庫加載是否正確？

可以用jQuery autocomplete代替嗎？

編輯：您可以配置YUI autocomplete to use an iFrame！它的作用在於它確實隱藏了<select>，但不是立即。這可能是最好的解決方案，因爲它不需要jQuery或bgiframe。

編輯2：我對YUI創建的速度感到不滿意，所以提出了這個黑客攻擊！這是一個完整的解決方案，似乎在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>

來源

2011-04-13 20:04:37 andyb

我現在無法使用jquery :(我檢查過，並且認爲沒有任何腳本錯誤/衝突。 – xyz 2011-04-14 05:49:20

嗯，那麼你使用的jQuery的「bgiframe」，這就是爲什麼我問:-)我已經更新了我的答案儘管它可能不是最好的用戶體驗，但它可以起作用。 – andyb 2011-04-14 09:06:32

它的工作就像一個魅力:) :)感謝andyb .. – xyz 2011-04-14 12:12:02

您可以做的一件事是在流程開始時隱藏<select>（使用visibility:hidden以免弄亂佈局）並在最後顯示它。

順便說一句：找到另一個使用YUI + jQuery + bgiframe + ie6的StackOverflow用戶的可能性非常低。大多數用戶喜歡幫助調試代碼，而不是插件。

來源

2011-04-13 13:46:57

感謝Diodeus。我不想隱藏它，這就是爲什麼我使用bgiframe。我知道可能性很低，但我仍然很樂觀，因爲它讓我失望，截止日期非常接近。 – xyz 2011-04-13 13:51:30

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

回答

相關問題