title: Grabbing values from Ajax AutoCompleteExtender with "Tab" or "Enter"
body: <p>I have a setup where a user can enter a zip code into an ASP.NET <code>TextBox</code> control, and I have an <code>AutoCompleteExtender</code> from the Ajax Control Toolkit attached to that textbox. It gets its data from a static page method on the ASPX page.</p>
  
  <p>When the user starts typing a Swiss zip code, e.g. <code>3</code> and then waits a brief moment, a list of matching zip code shows up - something like:</p>
  
  <pre><code>3000 - Bern
  3001 - Bern
  </code></pre>
  
  <p>and so on. Works like a charm.</p>
  
  <p>The <em>normal</em> way to pick one of the options shown is to move your mouse pointer to the list and select the one you want, click on it or press <kbd>Enter</kbd>, and get the zip code into that textbox (and the city name into a second textbox next to it).</p>
  
  <p>Now, I got some additional requirements from my project manager:</p>
  
  <ol>
  <li><p>we would like to be able to just press <kbd>Enter</kbd> <strong>without</strong> going into the list of choices to select one - he'd like to just get the first (or often times: only) entry shown put into those two textboxes...</p></li>
  <li><p>we would like to be able to enter a valid 4-digit zip code and then just press <kbd>Tab</kbd> and move out of the textbox for the zipcode, and have the first (possibly only) entry with that zipcode be chosen and "selected" (and stuffed into the two textboxes).</p></li>
  </ol>
  
  <p>Seems like a tall order to me (I'm <em>not</em> a great Javascript guru at all.....) - any ideas? </p>
  
  <p>This is my ASP.NET page (in a standard ASP.NET 4.0 webforms sample app - with a master page; <em>the script is simplified; in reality, I'm splitting up the text <code>3001 - Bern</code> at the dash and stick the first part into the zip code and the second part into the city textbox</em>):</p>
  
  <pre><code>&lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
      &lt;script type="text/javascript"&gt;
          function IAmSelected(source, eventArgs) {
              $get('tbxCity').value = eventArgs.get_value();
          }
      &lt;/script&gt;
      &lt;asp:ScriptManager runat="server" EnablePageMethods="True" /&gt;
  
      &lt;asp:Literal runat="server" ID="litPrompt" Text="Please enter zip code: " /&gt;
      &lt;asp:TextBox runat="server" ID="tbxZipcode" MaxLength="10" /&gt;
      &lt;act:AutoCompleteExtender runat="server" ID="acZipCode" TargetControlID="tbxZipcode" MinimumPrefixLength="1" 
                                CompletionInterval="25" ServiceMethod="GetMatchingZipCodes" CompletionSetCount="15"
                                OnClientItemSelected="IAmSelected" /&gt;
      &lt;asp:TextBox runat="server" ID="tbxCity" MaxLength="50"  /&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>and my code-behind (<em>this, too, is simplified - of course, in reality, I get this data from a Entity Framework data model</em>):</p>
  
  <pre><code>[WebMethod]
  [ScriptMethod]
  public static string[] GetMatchingZipCodes(string prefixText, int count)
  {
     return new string[] { "3000 - Bern", "3001 - Bern", "4000 - Basel", "6000 - Lucerne", "6001 - Lucerne" };
  }
  </code></pre>