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つ見つかりました。

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 に答える