Capturing values ​​from Ajax AutoCompleteExtender using "Tab" or "Enter"

I have a setup where a user can enter a zip code into an ASP.NET control TextBox

, and I have AutoCompleteExtender

from the Ajax Control Toolkit attached to this text box. It gets its data from a static method of a page in an ASPX page.

When the user starts to enter the Swiss postal code for example. 3

and then waits for a moment, a list of the corresponding zip codes appears - something like:

3000 - Bern
3001 - Bern

      

        
        
        
      

    

etc. Works like a charm.

The usual way to select one of the options presented is to move your mouse over the list and select the one you want, click on it, or click Enterand get the zip code into that text box (and the city name in the second text box next to it).

Now I have some additional requirements from my project manager:

• we would like to just click Enter without in the list of options to select one - he would just like to get the first (or often times: only) entry shown in these two text boxes ...

• we would like to be able to enter a valid 4 digit zip code and then just click Taband exit the text box for zipcode and have the first (maybe only) entry with that zipcode being selected and "selected" (and stuffed into two text boxes) ...

Sounds like high order to me (I'm not a great Javascript guru at all .....) - any ideas?

This is my ASP.NET page (in a standard example of an ASP.NET 4.0 web forms application with a master page, the script is simplified, in reality I split the text 3001 - Bern

with a dash and insert the first part into the zip code and the second part into the city textbox):

<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>

      

        
        
        
      

    

and my code-behind (this is simplified too - of course I'm actually getting this data from the Entity Framework data model):

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