ASP.NET ajaxcontroltoolkit自动完成UL覆盖问题 [英] ASP.NET ajaxcontroltoolkit autocomplete ul overlay issue

问题描述

我有code的下面的代码片段在我的ASP.NET应用程序（简体）：

I have a following snippet of code in my ASP.NET application (simplified):

<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
}

问题是自动完成插件呈现的无序列表。它包含在文档中，如果自动完成列表中可见或不可见：

The problem is that autocomplete plugin renders an unordered list. It is contained in the document if autocomplete list is visible or not:

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

当自动完成列表是可见的，是没有问题的，因为用户可以选择需要自动完成的元素。反过来自动完成列表是隐藏的，无序列表是无形的，但叠加多选择HTML控件（因为UL拥有的高度：130px; 的），并有与多选内选择要素的问题：

When the autocomplete list is visible, there is no problem, because user is able to select desired autocomplete element. In turn autocomplete list is hidden, the unordered list is invisible but overlays multi select HTML controls (because ul has height : 130px;), and there are problems with selecting elements inside the multiselect:

问题发生在FF和Opera，但不是在IE和Chrome。

Problem occurs in FF and Opera, but not in IE and Chrome.

请帮忙，

最好的问候，
WP

Best regards, WP

推荐答案

我发现基于JavaScript的一个可能的解决方案：

I found one possible solution based on Javascript:

1）修改 autocomplete_completionListElements CSS类 - 删除高度：130px ;属性。

1) Modify autocomplete_completionListElements CSS class - remove height : 130px; property.

.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）的Javascript处理code：

3) Javascript handlers code:

function autocompleteClientShown(source, args) {

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

function autocompleteClientHidden(source, args) {

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

}

这篇关于ASP.NET ajaxcontroltoolkit自动完成UL覆盖问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！