0

我的 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 和 Opera 中，但不在 IE 和 Chrome 中。

请帮忙，

最好的问候， WP

4

1 回答 1

0

我找到了一种基于 Javascript 的可能解决方案：

1) 修改autocomplete_completionListElementsCSS 类 - 删除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）Javascript处理程序代码：

function autocompleteClientShown(source, args) {

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

function autocompleteClientHidden(source, args) {

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

}
于 2013-03-29T17:52:08.117 回答