ASP.NET ajaxcontroltoolkit自動完成UL覆蓋問題

Question

我有一個跟隨我的ASP.NET應用程序的代碼片段（簡體）：

<asp:Panel ID="Panel7" runat="server"> 

<asp:TextBox ID="RecTextBox" runat="server" autocomplete="off" Height="18px" Width="800px"/> 

    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
              CompletionListCssClass="autocomplete_completionListElements" 
              CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" 
              CompletionListItemCssClass="autocomplete_listItem" 
              CompletionSetCount="20" 
              DelimiterCharacters=";, :" 
              Enabled="True" 
              MinimumPrefixLength="2" 
              ServiceMethod="GetCompletionList" 
              ServicePath="Rec.asmx" 
              ShowOnlyCurrentWordInCompletionListItem="True" 
              TargetControlID="RecTextBox" />         

      <br />        
     <asp:Button ID="Button3" runat="server" Text="Add" OnClick="Button3_Click" /> 
     <asp:Button ID="Button11" runat="server" Text="Remove" OnClick="Button11_Click" /> 


     <br /> 
     <asp:Panel ID="Panel8" runat="server" Height="150"> 
      <asp:ListBox ID="ListBox1" runat="server" Width="800" Height="150"></asp:ListBox> 
     </asp:Panel> 
    </asp:Panel> 

隨着CSS類：

.autocomplete_completionListElements 
{ 
    overflow : auto; 
    height : 130px; 
    list-style-type : none; 
} 

/* AutoComplete highlighted item */ 
.autocomplete_highlightedListItem 
{ 
    background-color: #ffff99; 
    color: black; 
    padding: 1px; 
} 

/* AutoComplete item */ 
.autocomplete_listItem 
{ 
    background-color : window; 
    color : windowtext; 
    padding : 1px; 
    left :0px 
} 

的問題是該自動完成插件呈現無序列表。它包含在文檔中，如果自動完成列表可見或不可見：

<ul id="ContentPlaceHolder2_TabContainer1_TabPanel2_AutoCompleteExtender1_completionListElem" class="autocomplete_completionListElements" style="position: absolute;"></ul> 

當自動完成列表中可見，是沒有問題的，因爲用戶可以選擇需要自動完成的元素。反過來自動完成清單是隱藏的，無序列表是不可見的，但重疊的多選擇HTML對照（因爲UL具有高度：130px;），並且有與所述多選內選擇元件的問題：在FF和發生

問題歌劇，但不是在IE和Chrome。

請幫忙，

最好的問候， WP

Answer 1

我發現基於JavaScript一個可能的解決方案：

1）修改autocomplete_completionListElements CSS類 - 刪除height : 130px;屬性。

.autocomplete_completionListElementy 
{ 
    overflow : auto; 
    list-style-type : none; 
} 

2）指定的JavaScript處理程序如下AutoCompleteExtender屬性：OnClientShown, OnClientHidden

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
                 CompletionListCssClass="autocomplete_completionListElements" 
                 CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" 
                 CompletionListItemCssClass="autocomplete_listItem" 
                 CompletionSetCount="20" 
                 DelimiterCharacters=";, :" 
                 Enabled="True" 
                 MinimumPrefixLength="2" 
                 ServiceMethod="GetCompletionList" 
                 ServicePath="Rec.asmx" 
                 ShowOnlyCurrentWordInCompletionListItem="True" 
                 TargetControlID="RecTextBox" 
                 OnClientShown="autocompleteClientShown" 
                 OnClientHidden="autocompleteClientHidden" /> 

3）投票處理程序代碼：

function autocompleteClientShown(source, args) { 

    source._popupBehavior._element.style.height = "130px"; 
} 

function autocompleteClientHidden(source, args) { 

    source._popupBehavior._element.style.height = "0px"; 

}