title: Ajax async get and key press function
body: <p>I need to populate a select list based on the information input on a form text inplut field. I got the Ajax part figured out but it does not work as expected. The idea is as the user typing in the first name field, the select list will populate the appropriate options. The function does work but the var firstname = $("#fn").val(); call will always return one character less than the content typed in the field.
  Any help will be appreiated!</p>
  
  <p>Below is the relevent html and code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $("#fn").keypress(function() {
      var firstname = $("#fn").val();
      $.get("CustomerList", {FirstName: firstname}, function(responseText) {
      $("#div1").text(responseText);
      });
  });
      });
  &lt;/script&gt; 
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Show all names&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form method="GET" action='Controller' name="CreateNTF"   &gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;Create User:&lt;/td&gt;
              &lt;td&gt;&lt;input id="fn" type="text" name="FirstName" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="ln" type="text" name="LastName"/&gt;&lt;/td&gt;
          &lt;/tr&gt;  
          &lt;tr&gt;
              &lt;td&gt;Carrier&lt;/td&gt;
              &lt;td&gt;
              &lt;span id="div1"&gt;&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input type="submit" name="submit" value="Submit" onClick="return validateForm();"/&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>