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"; 

}