ASP.NET ajaxcontroltoolkit autocomplete ul overlay issue

问题

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>

Along with CSS classes:

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

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:

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

Please for help,

Best regards, WP

回答1:

I found one possible solution based on Javascript:

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

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

2) Assign Javascript handlers to following AutoCompleteExtender properties: 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 handlers code:

function autocompleteClientShown(source, args) {

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

function autocompleteClientHidden(source, args) {

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

}

来源：https://stackoverflow.com/questions/14233762/asp-net-ajaxcontroltoolkit-autocomplete-ul-overlay-issue

标签

ASP.NET

autocomplete

html-lists

overlay

ajaxcontroltoolkit