c# - 当 AJAX 工具包自动完成扩展文本框时，面板默认按钮不起作用

Question

我正在使用 ASP.NET 面板为一些控件（如 TextBox）设置默认按钮，但由于 AJAX 控件工具包的 AutoCompleteExtender 似乎无法正常工作。请帮忙..！

代码如下：

<asp:Panel ID="pnlSearchBox" runat="server" class="search-main-box" DefaultButton="lnkSearch">
        <asp:TextBox ID="txtLocation" runat="server" CssClass="input-field" MaxLength="200" style="width: 182px; margin-bottom: 7px;"></asp:TextBox>
        <ajaxToolkit:AutoCompleteExtender runat="server" BehaviorID="AutoCompleteEx" ID="aceLocation" TargetControlID="txtLocation" ServicePath="~/autocomplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="20" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="true" >
            <Animations>
                <OnShow>
                    <Sequence>
                        <%-- Make the completion list transparent and then show it --%>
                        <OpacityAction Opacity="0" />
                        <HideAction Visible="true" />
                        <%-- Expand from 0px to the appropriate size while fading in --%>
                        <Parallel Duration=".4">
                            <FadeIn />
                            <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
                        </Parallel>
                    </Sequence>
                </OnShow>
                <OnHide>
                    <%-- Collapse down to 0px and fade out --%>
                    <Parallel Duration=".4">
                        <FadeOut />
                        <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
                    </Parallel>
                </OnHide>
            </Animations>
        </ajaxToolkit:AutoCompleteExtender>
        <div class="btn-search"><asp:LinkButton ID="lnkSearch" runat="server" class="btn-search-bg" OnClick="lnkSearch_Click"><span>Search</span></asp:LinkButton>
        </div>
</asp:Panel>

Answer 1

这样做：

 <asp:TextBox onkeydown="KeyDownHandler();" ID="txtLocation" runat="server" 
     CssClass="input-field" MaxLength="200" style="width: 182px; margin-bottom: 7px;">
 </asp:TextBox>

在你的页面头标签的脚本标签中添加这个：

function KeyDownHandler()
{
   if (event.keyCode == 13)
   {
      event.returnValue=false;
      event.cancel = true;
      document.getElementById('<%=lnkSearch.ClientID%>').click();
   }
}

编辑为使用 jQuery 上面的代码和 jquery 之间没有太大区别：

function KeyDownHandler()
{
   if (event.keyCode == 13)
   {
      event.returnValue=false;
      event.cancel = true;
      $('#<%=lnkSearch.ClientID%>').click();
   }
}