webforms - 使用 "Tab"或 "Enter"从 Ajax AutoCompleteExtender 获取值

Question

我有一个设置，用户可以在其中将邮政编码输入到 ASP.NET TextBox 控件中，并且我有一个来自 Ajax 控件工具包的 AutoCompleteExtender 附加到它文本框。它从 ASPX 页面上的静态页面方法获取数据。

当用户开始输入瑞士邮政编码时，例如3 然后稍等片刻，就会出现一个匹配的邮政编码列表 - 类似于:

3000 - Bern
3001 - Bern

等等。就像一个魅力。

选择显示的选项之一的正常方法是将鼠标指针移动到列表并选择您想要的选项，单击它或按 Enter，并将邮政编码输入该文本框(并将城市名称输入旁边的第二个文本框)。

现在，我从我的项目经理那里得到了一些额外的要求:

1. 我们希望能够只按 Enter 而无需进入选项列表来选择一个 - 他只想得到第一个(或经常:仅)显示的条目放入这两个文本框...

2. 我们希望能够输入一个有效的 4 位邮政编码，然后只需按 Tab 并移出邮政编码的文本框，并获得第一个(可能只有) 带有该邮政编码的条目被选中并“选中”(并填充到两个文本框中)。

对我来说似乎是一项艰巨的任务(我根本不是一个伟大的 Javascript 大师......)- 有什么想法吗？

这是我的 ASP.NET 页面(在标准 ASP.NET 4.0 webforms 示例应用程序中 - 带有母版页；脚本已简化；实际上，我正在拆分文本 3001 - Bern 并将第一部分粘贴到邮政编码中，将第二部分粘贴到城市文本框中):

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script type="text/javascript">
        function IAmSelected(source, eventArgs) {
            $get('tbxCity').value = eventArgs.get_value();
        }
    </script>
    <asp:ScriptManager runat="server" EnablePageMethods="True" />

    <asp:Literal runat="server" ID="litPrompt" Text="Please enter zip code: " />
    <asp:TextBox runat="server" ID="tbxZipcode" MaxLength="10" />
    <act:AutoCompleteExtender runat="server" ID="acZipCode" TargetControlID="tbxZipcode" MinimumPrefixLength="1" 
                              CompletionInterval="25" ServiceMethod="GetMatchingZipCodes" CompletionSetCount="15"
                              OnClientItemSelected="IAmSelected" />
    <asp:TextBox runat="server" ID="tbxCity" MaxLength="50"  />
</asp:Content>

和我的代码隐藏(这也被简化了 - 当然，实际上，我从 Entity Framework 数据模型中获取这些数据):

[WebMethod]
[ScriptMethod]
public static string[] GetMatchingZipCodes(string prefixText, int count)
{
   return new string[] { "3000 - Bern", "3001 - Bern", "4000 - Basel", "6000 - Lucerne", "6001 - Lucerne" };
}

Answer 1

检查 AutoCompleteExtender 的 FirstRowSelected 属性。从您的要求来看，这似乎正是您所需要的。