Получение значений из Ajax AutoCompleteExtender с помощью "Tab" или "Enter"

Question

У меня есть настройки, где пользователь может ввести почтовый индекс в ASP.NET TextBox контроль, и у меня есть AutoCompleteExtender из Ajax Control Toolkit, прикрепленного к этому текстовому полю. Он получает свои данные из метода статической страницы на странице 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

Проверить FirstRowSelected свойство AutoCompleteExtender. Из ваших требований кажется, что это именно то, что вам нужно.